本文介绍了Vue中的Vue.set方法的应用场景，特别是在外部操作Vue实例数据时如何确保视图能够正确响应变化。通过示例展示了当直接修改数组元素或更改数组长度时，Vue.set如何帮助实现界面的自动更新。
- 什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。
- Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。
- vue.set很少用得到，但是当我们利用索引直接设置一个项时，vue不会为我们自动更新，或者当我们修改数组的长度时，vue也不会为我们自动更新.这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.goods,2, {name: "house", num: 4})来设置改变，vue才会给我们自动更新。如下所示：<body><h1>v.set全局操作 </h1><hr><div id="app"><ul><li v-for="item in goods">{{item.name}}---{{item.num}}</li></ul><p>总计{{count}}件产品</p><button @click="qingkong">清空购物车</button></div><button onclick="add()">加</button><script>function add() {//Vue.set(abc, 'count', '4');//修改abc对象里面的count，改为4// app.goods[2] = {// name: "house",// num: 4// }Vue.set(app.goods, 2, {name: "house",num: 4});console.log("我已经执行了");}var abc = {count: 7,goods: [{name: "car",num: 3},{name: "pen",num: 4}]}var app = new Vue({el: "#app",data: abc,methods: {qingkong: function () {this.count = 0;this.goods = [];}}});</script></body>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
