Vue2 监听属性改变watch的总结分析
- 发布时间：
- 作者：码农之家
- 点击：129
这篇文章主要知识点是关于Vue2、监听、watch、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
Vue2 监听属性改变watch的实例代码
效果：
代码：
<div id="app2">
<label>幼儿园入学年龄（3～6）：</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </button>
<p v-show="hasErr">{{ errMsg }}</p>
</div>
<script>
var app = new Vue({
el:"#app2",
data:{
child:{age:2},
hasErr:false,
errMsg:""
},
methods:{
older:function () {
this.child.age ++;
},
younger:function () {
this.child.age --;
},
hideErr:function () {
var self = this;
setTimeout(function () {
self.hasErr = false;
},3000);
}
},
//构造器内的watch
watch:{
'child.age':function (newVal,oldVal) {
if(newVal > 6){
this.child.age = 6;
this.errMsg = "不得大于6岁";
this.hasErr = true;
this.hideErr();
}
}
}
});
app.$watch("child.age", function (newVal,oldVal) {
if(newVal < 3){
app.child.age = 3;
app.errMsg = "不得小于3岁";
app.hasErr = true;
app.hideErr();
}
}, {deep:true, immediate:true}); //deep默认true immediate指示是否立即以表达式的当前值触发回调
</script>
以上这篇Vue2 监听属性改变watch的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持码农之家。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
您可能感兴趣的文章:
Vue2 相关电子书
学习笔记
<
1
>
Vue2.0用 watch 观察 prop 变化(不触发)
本文介绍了Vue2.0用 watch 观察 prop 变化(不触发)，分享给大家，具体如下： A 组件： export default { props:{ name:{ type:String } }, data () { return { author: "Jinkey" } }, mounted:function(){ this.author = 'lili' }, watch:{ name:function(){ console.log(this.name); }, author:function(){ console.log('lili'); } }} author 有监测到变化，并输出了 lili ； name 由 B 组件传入，却没有监测到，控制台没有输出。 在 B 组件里调用 A 组件，并传值给 name firstcomponent :name="name"/firstcomponentimport firstcomponent from './component/firstcomponent.vue'export default { data () { return { msg: 'Hello Vue!', name:'lili' } }, components: { firstcomponent}} 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。 ……
解决Vue2.0 watch对象属性变化监听不到的问题
问题 很早之前就遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法了。 解决 为啥出现这种问题？受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式： 通过vue的this.$set(object, key, value)方法 通过Object.assign()重新创建一个对象, 例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 代码实例 template div p @click="fun1" 方式一/p p @click="fun2" 方式二/p /div/templatescriptexport default { data () { return { p: {a: 1} } }, methods: { fun1 () { console.log('click 1111') // this.p.b = 2 // 通过点方法赋值，发现观察不到p的变化 this.$set(this.p, 'b', 2) // 第一种解决方式，可以查看日志看到已经监听到了变化 }, fun2 () { conso……