if you click on the first li, the p of all li will be displayed.
Click the second li other li hidden content is also expanded, how to click which li, which li hidden li content to show?
the code is here:
<style>
.box_li{
padding: 0 40px;
font-size: 20px;
background-color: -sharpbfbfbf;
border: 1px solid -sharpfff;
}
.after_p{
background: bisque;
}
</style>
<template>
<div class="box">
<ul v-for="item in items">
<li class="box_li" @click="toggle()">
{{item.text}}
</li>
<li>
<p class="after_p" v-show="isActive" >
{{item.desc}}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
isActive: false,
items: [{
text: "one",
desc: "one content",
}, {
text: "two",
desc: "two conten"
}, {
text: "three",
desc: "three conten"
}]
}
},
methods: {
toggle() {
this.isActive = !this.isActive;
}
},
}
</script>