直接上测试代码:
html:
<template>
<div>
<div v-for="(item,index) in testData">
<div style="display: flex;justify-content: center">
<div @click="change(item,index)">{{index}}:</div>
<div v-show="item.show" :key="index">{{item.name}}</div>
</div>
</div>
</div>
</template>
js部分
data(){
return{
testData:[
]
}
},
methods:{
change(item,index){
let temp=item.show;
this.$set(this.testData,index,{...item,show:!temp});
//第二种方法
//this.$forceUpdate()
//item.show=!item.show
console.log(item);
console.log(this.testData)
}
},
mounted(){
this.testData=[
{
name:'张三',
age:21
},
{
name:'李四',
age:22
},
{
name:'王五',
age:23
}
]
for (let i in this.testData){
this.testData[i].show=true
}
console.log(this.testData)
}
原理参考:官网参考地址