位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > Vue.js 响应接口
阅读(22555525)      收藏       赞(5685)      分享
上一篇: JavaScript 钩子 下一篇: Vue.set

Vue 可以添加数据动态响应接口。

Vue.js 响应接口

示例

小白教程网www.2d5.net

我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应。 实例中通过点击按钮计数器会加 1setTimeout 设置 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>

效果图

小白教程网www.2d5.net

image.png


Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。

Vue 不能检测到对象属性的添加或删除,最好的方式就是在初始化实例前声明根级响应式属性,哪怕只是一个空值。

如果我们需要在运行过程中实现属性的添加或删除,则可以使用全局 VueVue.set Vue.delete 方法。


上一篇: JavaScript 钩子 下一篇: Vue.set
毕业设计网             广告联系QQ:45157718(微信同号)