这里是我上线前临时遇到的一个问题，解决方案也不是我提出来的，我是在网上看的一个解决方案，这里相当于是直接照搬过来了。方法有很多种，我只是采用了其中一种我觉得比较简单的，通过index，还有一种是currentTarget
直接上代码
<!-- test.vue -->
<template>
<ul>
<li v-for="(data,i) in datas" :key="data.id">
<span v-if="index === i && ifshow">{{data.name}}<span>
//toggle1和toggle2作用相同，只是toggle2跳过了先关闭再显示的流程
<button @click="toggle(i)">显示隐藏name</button>
</li>
</ul>
</template>
<script>
export default{
data(){
return {
ifshow: false,
index: -1,
datas: [{id:1,name:'1' },{id:2,name:'2'}]
}
},
methods:{
toggle1(i){
if (!this.ifshow) {
this.index = i;
} else {
this.index = -1;
}
this.ifshow = !this.ifshow;
},
toggle2(i){ //使用这个方法，html的判断条件只需要index === i即可
if (this.index !== i) {
this.index =i;
} else {
this.index = -1;
}
}
}
}
</script>
<style></style>
欢迎指正，欢迎延申
