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

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

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

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

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

//target:可以是对象或数组 key:要添加的属性名 value:要添加的属性的值
Vue.set( target, key, value )


//target:可以是对象或数组 key:要删除的属性名
Vue.delete( target, key )

        如果我们想给 myproduct 数组添加一个或多个属性,可以使用以下方式:

var myproduct = {"id":1, "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
//第一种属性添加方式
vm.products.qty = "1";
//第二种属性添加方式
//Vue.set(myproduct, 'qty', 1)
//删除price属性
Vue.delete(myproduct, 'price');
console.log(vm.products);

        上述例子中第一种属性添加方式,控制台输出结果如下,可以看到在products中添加了属性 qty,但是 get/set 方法却不能在 qty 属性中使用,无法实现动态响应,此方式不可行

        而第二种属性添加方式,控制台输出结果如下,看出 get/set 方法可用于qty 属性。qty成为和id一样的响应式属性。

        最后我们也可以看到 price 属性已删除,只剩下了 id 属性,price 属性的 get/set 方法也已删除。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐