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实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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
服务器端解压缩zip的脚本
2006/12/22 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP 断点续传实例详解
2017/11/11 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
js onload处理html页面加载之后的事件
2013/10/30 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
python实现自动重启本程序的方法
2015/07/09 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
python递归下载文件夹下所有文件
2019/08/31 Python
利用python实现AR教程
2019/11/20 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
棉花姑娘教学反思
2014/02/15 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
在校学生证明格式
2015/06/24 职场文书
升学宴学生致辞
2015/07/27 职场文书
情人节单身感言
2015/08/03 职场文书
python基础之类属性和实例属性
2021/10/24 Python