如何显示或绑定每个列表元素的每个类?当我单击单个列表元素时,它基本上显示了所有类,并且当我单击列表项时,它也消失了。因此,如何显示明智的类别列表,假设当我单击报告项时,它将显示报告类别。

 <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>

10-05 20:33
查看更多