vue中怎么同时监听多个参数

这篇文章主要讲解了"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)    }},

完整代码

                
        
点我
    
        

vue事件监听,条件判断

事件监听 v-on

语法糖@

1. 基本的使用法法

    
        点击次数{{counter}}         +         -    

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

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

按钮1按钮2

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

按钮2 按钮3 按钮4  

即带参数有带event

按钮5

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

3.事件对象的修饰符

.stop 相当于事件对象的stopPropagaton，阻止冒泡事件

 
父亲      儿子    

.prevent 阻止默认事件 preventDefault

百度一下

keyup 监听某个键盘键帽

.enter 只监听回车键

.once只监听一次

按钮

条件判断

1.v-if的基本使用

 
    
{{message}}
    
{{name}}
     
      
ccc
      
ccc
      
ccc
      
ccc
    

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

2.v-if和v-else使用

 
    
我是你爸爸
    
不，我才是你爸爸
  

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

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

 优秀 
 
 良好 
 
 及格 
 
 不及格 

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

可在computed里封装一个函数

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

在调用，可读性较好

感谢各位的阅读，以上就是"vue中怎么同时监听多个参数"的内容了，经过本文的学习后，相信大家对vue中怎么同时监听多个参数这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！