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

目录

• 如何同时监听多个参数
• data中定义一个对象
• 完整代码
• vue事件监听,条件判断
• 事件监听 v-on
• 条件判断

如何同时监听多个参数

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
        }
      }

在调用，可读性较好 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。