当前阅读教程:Vue.JS入门教程 > 使用 watch 实现计数器 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Vue.js 监听属性 | 下一篇: 千米与米之间的换算 |
示例代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js 监听属性-使用 watch 实现计数器</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--显示属性(变量)jishuqi的值--> <div>计数器:{{jishuqi}}</div> <!--ov的值为属性(变量)jishuqi改变之前的值--> <span>改变之前:{{ov}}</span> <!--nv的值为属性(变量)jishuqi改变之后的值--> <span>改变之后:{{nv}}</span><br> <!--每次点击,属性(变量)jishuqi的值加1--> <button @click="jishuqi++">点击一次,计数器增加1 </button> </div> <script> //Vue语句-开始 var vm = new Vue({ el: '#app', //app为前面div区块的id的值,通过"#"号绑定 data: { jishuqi:1,//属性初始化 ov:0, //属性初始化 nv:0 //属性初始化 }, methods:{ //自定义方法 add:function(){ this.x2=this.x2+1; }, //自定义方法(带参数) add2:function(cs1,cs2){ this.x3=cs1+cs2; } } })//Vue语句-结束 vm.$watch("jishuqi",function(nval,oval){ vm.$data.ov = oval vm.$data.nv =nval }); </script> </body> </html> 效果图 |
|
上一篇: Vue.js 监听属性 | 下一篇: 千米与米之间的换算 |