这篇文章主要讲解了“vue中怎么同时监听多个参数”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中怎么同时监听多个参数”吧！
如何同时监听多个参数
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/" rel="external nofollow" @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"> <h3>ccc</h3> <h3>ccc</h3> <h3>ccc</h3> <h3>ccc</h3> </div>为true显示，为false隐藏，可设置一个变量isShow来控制
2.v-if和v-else使用
<div id="add"> <h3 v-if = "isShow">我是你爸爸</h3> <h3 v-else>不，我才是你爸爸</h3> </div>两者只能显示一个当变量isShow为true时，else隐藏，同理相反
3.v-if和v-else-if和v-lese使用
<h3 v-if = "message >=90"> 优秀 </h3> <h3 v-else-if = "message >=80"> 良好 </h3> <h3 v-else-if = "message >=70"> 及格 </h3> <h3 v-else> 不及格 </h3>3个结合可读性差，不建议
可在computed里封装一个函数
computed: { result(){ let num = " " if (this.message >=90) { num = '优秀' }else if(this.message >= 80){ num = '良好' }else{ num = "不及格" } return num } }在调用，可读性较好
感谢各位的阅读，以上就是“vue中怎么同时监听多个参数”的内容了，经过本文的学习后，相信大家对vue中怎么同时监听多个参数这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
