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 相关文章推荐
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
javascript中的事件代理初探
Mar 08 Javascript
编程语言JavaScript简介
Oct 16 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 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迭代器的内部执行过程详解
2013/11/12 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
JS实现星星海特效
2019/12/24 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python入门篇之面向对象
2014/10/20 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python实现装饰器、描述符
2018/02/28 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
django修改models重建数据库的操作
2020/03/31 Python
python中setuptools的作用是什么
2020/06/19 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
初中体育教学反思
2014/01/14 职场文书
归元寺导游词
2015/02/06 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技