Free Vmess Node

vue中同时监听多个参数的实现_vue.js

首页 / 新闻资讯 / 正文

如何同时监听多个参数

vue使用watch同时监听多个参数，其中有任意一个参数发生改变时，都会被监听到需要使用到计算属性computed与监听watch

data中定义一个对象

data(){      return{          obj:{              name:'xpf',              gender:'male',              age:24      }      }  }
  • computed中：将需要监听的参数放入一个新变量中
computed:{      'newParams':function(){          const {name,age} = this.obj          return {name,age}      }      },
  • watch中：监听新的变量
watch:{      newParams:function(){          alert(1)      }  },

完整代码

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>watch同时监听多个属性</title>      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>  </head>  <body>      <div id="app">          <div @click="changeObj">点我</div>      </div>          <script>          new Vue({              el:'#app',              data(){                  return{                      obj:{                          name:'xpf',                          gender:'male',                          age:24                      }                  }              },              computed:{                  'newParams':function(){                      const {name,age} = this.obj                      return {name,age}                  }                  },              watch:{                  newParams:function(){                      alert(1)                  }              },              methods:{                  changeObj(){                      // this.obj.name = 'xx'                      this.obj.age = 21                  }              }          })      </script>  </body>  </html>

vue事件监听,条件判断

事件监听 v-on

语法糖@

1. 基本的使用法法

    <div id="add">          点击次数{{counter}}           <button @click = "add">+</button> <!--v-on:click = "" 语法糖  -->          <button @click = "dec">-</button>      </div>
    <script src="../js/vue.js"></script>      <script>          const add = new Vue({              el:'#add',              data:{                  counter:0              },              methods:{                  add:function(){                      console.log('添加了');                      this.counter++                  },                  dec:function(){                      console.log('减少了');                      this.counter--                  }              }          })        </script>

2. 事件监听带参数的使用方法

不带参数，写函数时，小括号可写可不写

<button @click = "one">按钮1</button>  <button @click = "one()">按钮2</button>

带有参数时，写函数时，小括号要写，传进的参数也要写

<button @click = "two">按钮2</button> <!-- 默认输出 浏览器生产的event事件对象 -->  <button @click = "two()">按钮3</button> <!-- 输出 undefind -->  <button @click = "two(123)">按钮4</button>  <!-- 输出 123  -->

即带参数有带event

<button @click = "three(123,$event) ">按钮5</button>

在小括号里添加$event可即添加参数又添加event事假

3.事件对象的修饰符

  • .stop相当于事件对象的stopPropagaton，阻止冒泡事件
 <div @click = "one">父亲        <button @click.stop = "two">儿子</button>      </div>
  • .prevent阻止默认事件 preventDefault
<a href="https://www.baidu.com/"   @click.prevent = "two">百度一下</a>
  • keyup监听某个键盘键帽
  • .enter只监听回车键
<input type="text" @keyup= "two">  <input type="text" @keyup.enter = "two">
  • .once只监听一次
<button @click.once = "two">按钮</button>

条件判断

1.v-if的基本使用

 <div id="add">      <div v-if = "true">{{message}}</div>      <div v-if = "false">{{name}}</div>         <div v-if = "isShow">        <h2>ccc</h2>        <h2>ccc</h2>        <h2>ccc</h2>        <h2>ccc</h2>      </div>

为true显示，为false隐藏，可设置一个变量isShow来控制

2.v-if和v-else使用

 <div id="add">      <h2 v-if = "isShow">我是你爸爸</h2>      <h2 v-else>不，我才是你爸爸</h2>    </div>

两者只能显示一个当变量isShow为true时，else隐藏，同理相反

3.v-if和v-else-if和v-lese使用

<h2 v-if = "message >=90"> 优秀 </h2>   <h2 v-else-if = "message >=80"> 良好 </h2>   <h2 v-else-if = "message >=70"> 及格 </h2>   <h2 v-else> 不及格 </h2>

3个结合可读性差，不建议

可在computed里封装一个函数

 computed: {          result(){            let num = " "            if (this.message >=90) {              num = '优秀'            }else if(this.message >= 80){              num = '良好'            }else{              num = "不及格"            }            return num          }        }

在调用，可读性较好 

上一个：dell设置ssd启动（dell设置从ssd启动）

下一个：河南兽药品牌排行（河南兽药品牌排行前十）

热门文章

归纳