当前位置:首页 > 编程教程 > vue技术文章 > Vue2 监听属性改变watch的实例代码

Vue2 监听属性改变watch的总结分析

  • 发布时间:
  • 作者:码农之家
  • 点击:129

这篇文章主要知识点是关于Vue2、监听、watch、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF作者:纪尧姆·周
立即下载

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的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • vue中的watch监听数据变化及属性的知识点总结
  • Vue中watch对象内属性知识点分析
  • Vue2 相关电子书
    学习笔记
    网友NO.344017

    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}} 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

    网友NO.219209

    解决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……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com