毕业生网站建设方案书建立免费网站

原数据对象

flowData: {list: [], // 数据值column: 2, // 瀑布列数columnSpace: 2 // 瀑布列宽间距
}

动态添加后的数据对象

flowData: {list: [], // 数据值column: 2, // 瀑布列数columnSpace: 2, // 瀑布列宽间距column_1: [],column_2: []
}

动态添加更多的数据对象的方法

created() {/* 初始化每一列的数据 */for (let i = 1; i <= this.flowData.column; i++) {this.$set(this.flowData, `column_${i}`, []);}
},

使用 this.$set 来动态添加一个名为 `column_${i}` 的属性，它被初始化为空数组或空对象或其他的值。可以根据需要重复此过程以添加更多的列属性

this.$set(target, key, value);
// target：要更改的数据源(可以是对象或者数组)
// key：要更改的具体数据
// value：重新赋的值

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hello，ningzaichun')

简单来说：当你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，这个时候就需要用到 this.$set() 这个方法

Vue.set() 与 this.$set() 的区别

Vue.set()：将 set 函数绑定在 vue 构造函数中，设置实例创建之后添加的新的响应式属性，且触发视图更新，但是不允许添加根级响应式属性，只可以向嵌套对象添加响应式属性

this.$set()：将 set 函数绑定在 vue 原型上，只能设置实例创建后存在的数据(数据已经在 data 中)

两者都是实现向实例对象中添加响应式属性，触发视图更新，两者原理和用法基本相同，都是使用 set 函数

Vue.set() 是将 set 函数绑定在 Vue 构造函数上，this.$set() 是将 set 函数绑定在 Vue 原型上