应用场景:点击之后添加高亮,再次点击则取消高亮
html:
<ul class="service-team-content">
<li
v-for="(item, index) in 10"
:key="index"
:class="{ activeCss: serviceActiveArr[`${index}`] == index }"
@click="activeFn(index)"
>
这是 {{ index }}当前{{ serviceActiveArr[`${index}`] }}
</li>
</ul>
js:
data() {
return {
active: 2,
serviceAll: [],
popShow: false,
serviceActive: 1,
serviceActiveArr: {},
}
},
methods:{
activeFn(index) {
// 给对象重新改堆内存 触发视图更新(只改变对象的键是不会触发视图更新的)
let newServiceActiveArr = Object.assign({}, this.serviceActiveArr) // Object.assign拷贝当前对象
if (newServiceActiveArr[`${index}`] === undefined) {
newServiceActiveArr[`${index}`] = index
} else {
delete newServiceActiveArr[`${index}`]
}
this.serviceActiveArr = newServiceActiveArr // 再给对象赋值做视图更新
console.log(this.serviceActiveArr, 'this.serviceActiveArr')
},
}
关于对象内的属性改变不更新视图:
方法1:this.$forceUpdate
方法2:Object.assign({},this.obj)
方法3: this.$set(this.obj,'k1','v1')