vue同时监听多个数据变化,vueon能不能监听多个方法
这篇文章主要介绍了某视频剪辑软件中同时监听多个参数的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
如何同时监听多个参数数据中定义一个对象完整代码某视频剪辑软件事件监听，条件判断事件监听绑定事件条件判断
如何同时监听多个参数
某视频剪辑软件使用看同时监听多个参数，其中有任意一个参数发生改变时，都会被监听到需要使用到计算属性计算与监听看
data中定义一个对象
data(){
返回{
目标
名称： xpf ，
性别：男性，
年龄：24岁
}
}
}
计算中：将需要监听的参数放入一个新变量中计算值：{
新参数:函数(){
const {name，age}=this.obj
返回{姓名，年龄}
}
},
看中：监听新的变量观察：{
newParams:function(){
警报(1)
}
},
完整代码
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题手表同时监听多个属性/标题
脚本src= https://cdn。bootcss。com/vue/2。6 .10/vue。js /脚本
/头
身体
div id=应用程序
div @click=changeObj 点我/div
/div
脚本
新Vue({
埃尔： #app ，
data(){
返回{
目标
名称： xpf ，
性别：男性，
年龄：24岁
}
}
},
计算值：{
newParams:function(){
const {name，age}=this.obj
返回{姓名，年龄}
}
},
观察：{
newParams:function(){
警报(1)
}
},
方法：{
changeObj(){
//this.obj.name=xx
年龄=21岁
}
}
})
/脚本
/body
/html
vue事件监听，条件判断
事件监听 v-on
语法糖@
1. 基本的使用法法
div id=add
点击次数{{counter}}
button @click=add /button！- v-on:click= 语法糖-
button @click=dec-/button
/div
脚本src=./js/vue.js/script
脚本
const add=new Vue({
el:#add ，
数据：{
计数器：0
},
方法：{
add:function(){
console.log(添加了);
这个柜台
},
十二月：函数(){
console.log(减少了);
这个柜台-
}
}
})
/脚本
2. 事件监听带参数的使用方法
不带参数，写函数时，小括号可写可不写
button @click=one 按钮1/按钮
button @click=one()按钮2/按钮
带有参数时，写函数时，小括号要写，传进的参数也要写
按钮@click=two 按钮2/按钮！-默认输出浏览器生产的事件事件对象-
button @click=two()按钮3/按钮！-输出未找到-
button @click=two(123)按钮4/按钮！-输出123 -
即带参数有带事件
button @click=three(123，$event)按钮5/按钮
在小括号里添加$事件可即添加参数又添加事件事假
3.事件对象的修饰符。停止相当于事件对象的停止宣传，阻止冒泡事件div @click=one 父亲
button @click.stop=two 儿子/按钮
/div。预防阻止默认事件preventDefaulta href= https://www。百度一下。com/ rel=外部无关注 @ click。防止=二百度一下/a
击键监听某个键盘键帽。进入只监听回车键输入类型=text @keyup=two
输入类型= text @ keyup。enter= two 。一次只监听一次button @click.once=two 按钮/按钮
条件判断
1.v-if的基本使用
div id=add
div v-if=true{{message}}/div
div v-if=false{{name}}/div
div v-if=isShow
h2ccc/h2
h2ccc/h2
h2ccc/h2
h2ccc/h2
/div
为真实的显示，为错误的隐藏，可设置一个变量是否显示来控制
2.v-if和v-else使用
div id=add
h2 v-if=isShow 我是你爸爸/h2
h2 v-else不，我才是你爸爸/h2
/div
两者只能显示一个当变量是否显示为真实的时，否则隐藏，同理相反
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个结合可读性差，不建议
可在计算里封装一个函数
计算值：{
结果(){
让num=
if (this.message=90) {
Num=优秀
}else if(this.message=80){
Num=好
}否则{
数量=失败
}
退货数量
}
}
当被调用时，它是可读的。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。