当前阅读教程:Vue.JS入门教程 > Vue.js 响应接口 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: JavaScript 钩子 | 下一篇: Vue.set |
Vue 可以添加数据动态响应接口。 Vue.js 响应接口示例我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应。 实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js 响应接口</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body>
<!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <p style = "font-size:25px;"> 计数器: {{ counter }}<!--直接显示计数器的值--> </p> <!--点击增加计数--> <button @click = "counter++" style = "font-size:25px;">点我</button> </div>
<script> //实例化Vue对象 var vm = new Vue({ el: '#app', data: { counter: 1 } }); //监听属性counter值的变化,如果有变化弹出提示框 vm.$watch('counter', function(nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!'); }); //10 秒后计算器的值加上 20 setTimeout( function(){ vm.counter += 20; },10000 ); </script>
</body> </html> 效果图Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。 Vue 不能检测到对象属性的添加或删除,最好的方式就是在初始化实例前声明根级响应式属性,哪怕只是一个空值。 如果我们需要在运行过程中实现属性的添加或删除,则可以使用全局 Vue,Vue.set 和 Vue.delete 方法。 |
|
上一篇: JavaScript 钩子 | 下一篇: Vue.set |