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

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)     } }, 完整代码 <!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">       <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         }       }

在调用,可读性较好 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读

    opporeno8参数配置及价格

    opporeno8参数配置及价格,面部,亿元,Oppo的荣誉2020年1月4日,接近屏幕关闭传感器是否支持双卡:支持oppor11splus什么时候上市的Oppo R11S P

    计算机主板BIOS设置详细-BIOS知识

    计算机主板BIOS设置详细-BIOS知识,,什么是电脑BIOS,一般电脑主板已经设置完毕后,电脑就开始按del键进入BIOS。系统启动BIOS,即微机的基本输入

    计算机蓝屏故障的计算机蓝屏解决方案

    计算机蓝屏故障的计算机蓝屏解决方案,,电脑蓝屏电脑故障经常使用电脑的朋友经常遇到,因为电脑蓝屏是一个非常普遍的现象,所以很难预测,什么时

    魅蓝note6性能参数有哪些

    魅蓝note6性能参数有哪些,摄像头,蓝牙,魅蓝note6性能参数有哪些魅力蓝色Note6最好拍照。电池寿命更长。蓝色Note6使用高通 snapdragon 625

    计算机自动关机的原因是什么

    计算机自动关机的原因是什么,,计算机(计算机),通常称为计算机,是一种用于高速计算的电子计算机。它可以进行数值计算和逻辑计算,还具有存储记忆

    电脑功率计算|电脑功率计算公式

    电脑功率计算|电脑功率计算公式,,电脑功率计算公式  从设计角度出发一般取300w/台基本都可以满足要求,可以从以下几个方面分析一下电脑功

    如何设置计算机视图视图的统一视图

    如何设置计算机视图视图的统一视图,,不知道你是否有这样的使用电脑经验,电脑在不同的文件夹打开,有时这个文件夹是用来查看列表的方式,但是当

    的故障_计算机解决无法打印文档

    的故障_计算机解决无法打印文档,,核心提示:最近,打印机出现了一个奇怪的现象,在打印正常之前,打印机不能打印最近的突然,提示发送打印作业,计算

    PC计算机:AMDCPU核心细节

    PC计算机:AMDCPU核心细节,,核心提示:AthlonXP的核心型athlonxp有4种不同的核心类型,但都有个共同点:他们都使用socketa接口,他们都使用PR标称值