这篇文章主要讲解了“vue中怎么同时监听多个参数”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中怎么同时监听多个参数”吧！
vue使用watch同时监听多个参数，其中有任意一个参数发生改变时，都会被监听到需要使用到计算属性computed与监听watch
计算
安全
数据库
网络和加速
企业服务
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>语法糖@
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">
<h3>ccc</h3>
<h3>ccc</h3>
<h3>ccc</h3>
<h3>ccc</h3>
</div>为true显示，为false隐藏，可设置一个变量isShow来控制
2.v-if和v-else使用
<div id="add">
<h3 v-if = "isShow">我是你爸爸</h3>
<h3 v-else>不，我才是你爸爸</h3>
</div>两者只能显示一个当变量isShow为true时，else隐藏，同理相反
3.v-if和v-else-if和v-lese使用
<h3 v-if = "message >=90"> 优秀 </h3>
<h3 v-else-if = "message >=80"> 良好 </h3>
<h3 v-else-if = "message >=70"> 及格 </h3>
<h3 v-else> 不及格 </h3>3个结合可读性差，不建议
可在computed里封装一个函数
computed: {
result(){
let num = " "
if (this.message >=90) {
num = '优秀'
}else if(this.message >= 80){
num = '良好'
}else{
num = "不及格"
}
return num
}
}在调用，可读性较好
感谢各位的阅读，以上就是“vue中怎么同时监听多个参数”的内容了，经过本文的学习后，相信大家对vue中怎么同时监听多个参数这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
