vue v-bind:class="{ activation:indexs==current}"

Question

点击的时候下面的男装也会跟着变化。            <li v-for="(item,index) in items">              <div class="screnn-classify" @click="map(item,index)">                <p>{{item.name}}</p>                <p >                  <svg class="icon" :class="{active: item.visible}" aria-hidden="true">                    <use xlink:href="#icon-right"></use>                  </svg>                </p>              </div>              <div v-show="item.visible" class="structure">                <span v-for="(data,indexs) in item.datas"                      @click="addClass(indexs)"                      v-bind:class="{ activation:indexs==current}">{{data}}</span>              </div>            </li>            下面是js           current:"0",                      addClass:function(indexs){                this.current = indexs;              }问题截图：

Answer 1

你的女装、男装所有的属性都绑定为同一个事件处理函数，这没啥，但是两个状态明显不一样，所以要两个变量来保存，在item对象上再添加一个字段，eg：value，点击的时候把单个属性data存进去，最后比较v-bind:class="{ activation:data==item.value}",就可以了

Answer 2

<li v-for="(item,index) in items" :key="index">

Answer 3

<div v-show="item.visible" class="structure">

    <span v-for="(data,indexs) in item.datas"

      @click="addClass(indexs)"

      v-bind:class="{ activation:indexs==current}">{{data}}</span>

</div>

这块写成组件 current addClass 放在新的组件中 把item.datas 传进去