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 相关文章推荐
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
vue 文件目录结构详解
Nov 24 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
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/03/04 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python获取邮件地址的方法
2015/07/10 Python
python处理xml文件的方法小结
2017/05/02 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python实现井字棋小游戏
2020/03/04 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
环保宣传标语
2014/06/12 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
作风建设年度心得体会
2014/10/29 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers