当前阅读教程:Vue.JS入门教程 > Vue.set | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Vue.js 响应接口 | 下一篇: Vue.delete |
Vue.set 方法用于设置对象的属性,它可以解决 Vue 无法检测添加属性的限制,语法格式如下: Vue.set( target, key, value ) 参数说明: n target: 可以是对象或数组 n key : 可以是字符串或数字 n value: 可以是任何类型
示例代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.set</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;"> 计数器: {{ products.id }}<br> </p> <!--每次点击对象products中的id属性值加1--> <button @click = "products.id++" style = "font-size:25px;">点我</button> </div> <script> //定义一个对象 var myproduct = {"id":1, name:"book", "price":"20.00"}; //实例化Vue对象 var vm = new Vue({ el: '#app', data: { counter: 1, products: myproduct //将定义的对象赋值给属性 } }); //给对象增加一个属性,我们可以在控制面板看到 vm.products.qty = "1"; console.log(vm); vm.$watch('counter', function(nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!'); }); </script> </body> </html> 效果图代码解析在以上实例中,使用以下代码在开始时创建了一个变量 myproduct: var myproduct = {"id":1, name:"book", "price":"20.00"}; 该变量在赋值给了 Vue 实例的 data 对象: var vm = new Vue({ el: '#app', data: { counter: 1, products: myproduct } }); 如果我们想给 myproduct 数组添加一个或多个属性,我们可以在 Vue 实例创建后使用以下代码: vm.products.qty = "1"; 查看控制台输出: 如上图看到的,在产品中添加了数量属性 qty,但是 get/set 方法只可用于 id,name 和 price 属性,却不能在 qty 属性中使用。 我们不能通过添加 Vue 对象来实现响应。 Vue 主要在开始时创建所有属性。 如果我们要实现这个功能,可以通过 Vue.set 来实现: <div id = "app"> <p style = "font-size:25px;">计数器: {{ products.id }}</p> <button @click = "products.id++" style = "font-size:25px;">点我</button> </div> <script type = "text/javascript"> var myproduct = {"id":1, name:"book", "price":"20.00"}; var vm = new Vue({ el: '#app', data: { counter: 1, products: myproduct } }); Vue.set(myproduct, 'qty', 1); console.log(vm); vm.$watch('counter', function(nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!'); }); </script> 从控制台输出的结果可以看出 get/set 方法可用于qty 属性。 |
|
上一篇: Vue.js 响应接口 | 下一篇: Vue.delete |