<template>
<div>
<div class="a" v-for="(item,index) in items">
<a @click="btn(index)" style="cursor: pointer" :key="1">点击</a>
<transition name="slide-fade">
<div class="b" v-if="show[index]" :key="2">
</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: [],
items: [
{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}
]
}
},
mounted() {
for (let i = 0; i < this.items.length; i++) {
this.show[i] = false;
}
},
methods: {
btn(id) {
this.show[id] = !this.show[id];
console.log(this.show);
}
}
}
</script>
<style>
.a {
500px;
margin: 0 auto;
border: 1px solid;
}
.b {
100%;
height: 100px;
border: 1px solid;
}
修改js
<script>
export default {
data () {
return {
show: [],
items: [
{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}
]
}
},
mounted () {
for (let i = 0; i < this.items.length; i++) {
this.$set(this.show, i, false)