如何在点击时显示每个类元素？

Question

如何显示或绑定每个列表元素的每个类？当我单击一个单独的列表元素时，它基本上显示所有类，当我单击列表项时它也会消失。那么如何才能显示明智的类列表，假设当我点击报表项时它会显示报表类。

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

Answer 1

我认为这些是你想要的：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你已经采用了公共变量this.show，要么采取其他变量，要么只是用类做，我用jquery做了，但你可以通过javascript来做。这只是一个想法。

＆＃13;

＆＃13;

new Vue({
    el: '#app',
    data: {
        show: false,
    },
    methods: {
        menu(item) {
            $(".item").addClass("d-none");
            $("."+item).removeClass("d-none");
        }
    }
});

＆＃13;

ul li{
  width:auto;
  padding:0 10px;
}
.d-none{
  display:none;
}
.item{
  font-size:20px;
  color:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<ul class="investor-item">
<li><a @click="menu('stock')">Stock Information</a></li>
<li><a @click="menu('price')">Price Sensitive Information</a></li>
<li><a @click="menu('financial')">Financial Information</a></li>
<li><a @click="menu('reports')">Reports</a></li>
</ul>
<div class="item stock d-none">this is stck</div>
<div class="item price d-none">this is price</div>
<div class="item financial d-none">this is financial</div>
<div class="item reports d-none">this is reports</div>
</div>

＆＃13;

＆＃13;

＆＃13;