Vue2 监听属性改变watch的实例代码


Posted in Javascript onAugust 27, 2018

效果:

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的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Vue实现剪贴板复制功能
Dec 31 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
js实现双色球效果
Aug 02 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 #Javascript
vue.js响应式原理解析与实现
Jun 22 #Javascript
JavaScript Canvas实现验证码
Aug 02 #Javascript
JS实现方形抽奖效果
Aug 27 #Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 #Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 #Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 #Javascript
You might like
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
python自带的http模块详解
2016/11/06 Python
基于python中theano库的线性回归
2018/08/31 Python
Python闭包思想与用法浅析
2018/12/27 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python龙贝格法求积分实例
2020/02/29 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
会计专业大学生求职信范文
2014/01/28 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
暑期实践个人总结
2015/03/06 职场文书
新学期开学寄语2016
2015/12/04 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
Python作用域和名称空间的详细介绍
2022/04/13 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang