目录使用watch监听指定数据的变化Vue watch监听多个值使用watch监听指定数据的变化 在vue中，可以使用watch属性来监听data中某个属性值的变化。 &
在vue中，可以使用watch属性来监听data中某个属性值的变化。
<html>
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<input type="text" v-model="firstname" >+
<input type="text" v-model="lastname" >=
<input type="text" v-model="fullname">
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
firstname:'',
lastname:'',
fullname:''
},
methods:{
},
//使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的function 处理函数
watch:{
firstname:function(newVal,oldVal){
//console.log('监视到了firstname的变化');
//this.fullname = this.firstname + "-" + this.lastname
console.log(newVal +"---"+oldVal)
this.fullname = newVal + "-" + this.lastname
},
'lastname':function(newVal){
this.fullname = this.firstname + "-" + newVal
}
}
})
</script>
</html>
用computed定义一个address对象吧，然后再去watch addres
data() {
return {
check: false,
sign_img: "",
submit_flag: false'
}
},
computed: {
btnObj() {
const { sign_img, check } = this
return {
sign_img,
check
}
}
},
watch: {
btnObj: {
handler: function(newVal,oldVal) {
if(!!this.sign_img && this.check){
this.submit_flag = true
this.sign_flag = '1'
}else{
this.submit_flag = false
this.sign_flag = '0'
}
},
deep: true,
immediate: true
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: vue如何使用watch监听指定数据的变化
本文链接: https://www.lsjlt.com/news/145378.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0