Vue中watch的简单应用
2023-09-27 14:24:14 时间
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。
如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。
下面写两个demo,参考demo来了解一下
demo1
<template>
<div>
<el-input v-model="demo"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: '',
value: ''
};
},
watch: {
demo(val) {
this.value = this.demo;
}
}
};
</script>
上面这个就浅显易懂了,通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起变化。
demo2
<template>
<div>
<el-input v-model="demo.name"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: {
name: ''
},
value: ''
};
},
computed: {
newName() {
return this.demo.name;
}
},
watch: {
newName(val) {
this.value = val;
}
}
};
</script>
上面这个例子,如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成。
demo3
<div id="app">
<input type="text" v-model="childrens.name" />
<input type="text" v-model="lastName" />
</div>
<script type="text/javascript">
var vm = new Vue( {
el: '#app',
data: {
childrens: {
name: '小强',
age: 20,
sex: '男'
},
tdArray:["1","2"],
lastName:"张三"
},
watch:{
childrens:{
handler:function(val,oldval){
console.log(val.name)
},
deep:true//对象内部的属性监听,也叫深度监听
},
'childrens.name':function(val,oldval){
console.log(val+"aaa")
},//键路径必须加上引号
lastName:function(val,oldval){
console.log(this.lastName)
}
},//以V-model绑定数据时使用的数据变化监测
} );
vm.$watch("lastName",function(val,oldval){
console.log(val)
})//主动调用$watch方法来进行数据监测
</script>
</body>
数组的变化,不需要深度watch。
嗯,就酱~
相关文章
- Vue Demij打通vue2与vue3壁垒,构建通用组件
- 【Vue】Vue组件中style中的局部样式设置scoped应用
- WTF!! Vue数组splice方法无法正常工作
- vue刷新当前页面
- Vue 全家桶 + Electron 开发的一个跨三端的应用
- Vue之mixins理解与应用
- Vue 警告: Failed setting prop “prefix“ on <input>: value [object Object] is invalid..........
- vue实现点击修改文字
- 基于Vue2.0+Vue-router构建一个简单的单页应用
- 场景类:vue多个router-view路由嵌套
- vue项目中如何封装api,使请求方法清晰,适合协作开发
- vue中全局组件与局部组件的注册,以及动态绑定props值
- springboot+vue家具销售电商平台(源码+文档)
- Vue中watch的简单应用
- webpack高级概念,解决单页面应用路由问题(vue用脚手架,404找不到页面二)(系列十五)
- Vue经典实例之可编辑的表格table(史上最简单方便的处理方式,比用element容易理解),同时处理input获取焦点的问题!不好用你找我
- vue 如何实现多页面应用
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
- webpack中require.context自动化注册,vue应用
- vue项目ide(vue项目环境搭建)