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

完整代码

                watch同时监听多个属性                
          
点我
      
          

vue事件监听,条件判断

事件监听 v-on

语法糖@

1. 基本的使用法法

    
          点击次数{{counter}}                            
         

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

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

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

        

即带参数有带event

在小括号里添加$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          }        }

在调用，可读性较好 

上一个：python的eval和json.loads(),json.dumps()

下一个：pyhton深度学习基于pytorch——创建Tensor和修改Tensor形状

热门文章

归纳