vue如何使用watch监听指定数据的变化
更新时间：2022年04月08日 14:17:53 作者：北海之灵
这篇文章主要介绍了vue如何使用watch监听指定数据的变化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用watch监听指定数据的变化
在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>
vue watch监听多个值
用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
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中动态select的使用方法,结合实例形式分析了vue.js使用动态select创建下拉菜单相关实现技巧与操作注意事项,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了vue中使用props传值的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Vue 开发音乐播放器之歌手页右侧快速入口功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了Element Alert警告的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue-router 起步步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
Vue Router4中params传参失效和报错问题的解决方法
在使用vue-router4中params 进行路由组件之间传参,跳转页面接收不了并报错,本文给大家介绍了Vue Router4中params传参失效和报错问题的解决方法,需要的朋友可以参考下2024-03-03
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面,本文给大家分享elementui简易介绍,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了在vue中使用公共过滤器filter的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项,本文就来介绍一下Vue开发配置tsconfig.json文件的实现,感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了vue axios登录请求拦截器，判断是否登录超时，或对请求结果做一个统一处理的教程详解,需要的朋友可以参考下2018-04-04
最新评论