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"> <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 } }
在调用,可读性较好
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
若文章对您有帮助,帮忙点个赞!
(微信扫码即可登录,无需注册)