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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
jquery validate表单验证插件
Sep 06 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
解决vue移动端适配问题
Dec 12 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
什么是SOLID
Mar 24 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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php接口隔离原则实例分析
2019/11/11 PHP
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
vue 组件简介
2020/07/31 Javascript
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
django celery redis使用具体实践
2019/04/08 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
销售经理工作职责范文
2013/12/03 职场文书
聚美优品励志广告词
2014/03/14 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
保护环境标语
2014/06/09 职场文书
2016年春节问候语
2015/11/11 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js