如何显示或绑定每个列表元素的每个类?当我单击单个列表元素时,它基本上显示了所有类,并且当我单击列表项时,它也消失了。因此,如何显示明智的类别列表,假设当我单击报告项时,它将显示报告类别。
<ul class="investor-item">
<li>
<a @click="mystock">Stock Information</a>
</li>
<li>
<a @click="myprice">Price Sensitive Information</a>
</li>
<li>
<a @click="myfinance">Financial Information</a>
</li>
<li>
<a class="stocks" @click="myreport">Reports</a>
</li>
</ul>
这些是类:
<div class="col-md-8 pd-0">
<transition name="fade">
<div class="stock" v-show="show">
this is stck
</div>
</transition>
<transition name="fade">
<div class="price" v-show="show">
this is price
</div>
</transition>
<transition name="fade">
<div class="financial" v-show="show">
this is finance
</div>
</transition>
<transition name="fade">
<div class="reports" v-show="show">
this is reports
</div>
</transition>
</div>
剧本:
<script>
new Vue({
el: '#root',
data: {
show: false,
},
methods: {
mystock() {
this.show;
},
myprice() {
this.show;
},
myfinance() {
this.show;
},
myreport() {
this.show = !this.show;
}
}
})
</script>
最佳答案
我认为这些是您想要的:
var app = new Vue({
el: '#app',
data () {
return {
current: -1,
list: [
{text:'Stock Information',content:'this is stock'},
{text:'Price Sensitive Information',content:'this is price'},
{text:'Financial Information',content:'this is finance'},
{text:'Reports',content:'this is reports'}
]
}
},
methods: {
itemClick (index) {
if(this.current == index){
this.current = -1
}else{
this.current = index
}
}
}
})
.fade-enter,.fade-leave-to{
opacity: 0
}
.fade-enter-active,.fade-leave-active{
transition: opacity .5s ease-in-out;
}
.active{
color:red;
}
.box{
position: relative;
width: 200px;
height: 300px;
}
.box>li{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.box>li:nth-child(1){
background: red;
}
.box>li:nth-child(2){
background: yellow;
}
.box>li:nth-child(3){
background: blue;
}
.box>li:nth-child(4){
background: darkblue;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item,index) of list" :class="{active: current==index}" @click="itemClick(index)">{{item.text}}</li>
</ul>
<transition-group tag="ul" name="fade" class="box">
<li v-for="(item,index) of list" :key="index" v-show="current==index">
{{item.content}}
</li>
</transition-group>
</div>