位置:电子教程 > 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.set
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Vue.js 响应接口 下一篇: Vue.delete

Vue.set 方法用于设置对象的属性,它可以解决 Vue 无法检测添加属性的限制,语法格式如下:

Vue.set( target, key, value )

参数说明:

n  target: 可以是对象或数组

n  key : 可以是字符串或数字

n  value: 可以是任何类型

 

示例

小白教程网www.2d5.net

代码
<!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>
效果图

小白教程网www.2d5.net

image.png

代码解析

在以上实例中,使用以下代码在开始时创建了一个变量 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";

查看控制台输出:

image.png

如上图看到的,在产品中添加了数量属性 qty,但是 get/set 方法只可用于 idname 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 属性。

image.png

上一篇: Vue.js 响应接口 下一篇: Vue.delete
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)