<template>
<div>
<p v-for="item in items" :key="item.age">{{ item.name }}</p>
<button @click="handClick">更改数据</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
{ name: "王五", age: 38 },
],
};
},
methods: {
handClick() {
this.items[0] = { name: "二狗", age: 40 };
// 此时items中,索引为0的这一项数据改变了,但是视图不会更新。
let text = { name: "二狗", age: 40 };
this.$set(this.items, 0, text);
// $set 可以触发视图更新
// 双向数据绑定才可以实现,数据改变,更新视图。
// 当vue的data中声明的对象/对象数组已经赋值后,
// 去更改属性的值,不会触发双向数据绑定,而$set可以实现。
// Vue.set( target , key , value)
// target: 要更改的数据源(可以是一个对象或者对象数组)
// key 要更改的具体数据 (索引值)
// value 重新赋的值
},
},
};
</script>
vue中 this.$set的用法详解
最新推荐文章于 2024-07-20 17:18:04 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)