鍍金池/ 問答/HTML/ vue v-bind:class="{ activation:ind

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

點擊的時候下面的男裝也會跟著變化。

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

問題截圖：

clipboard.png

回答
編輯回答
空痕

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

2018年4月25日 07:10
編輯回答
喵小咪

你的女裝、男裝所有的屬性都綁定為同一個事件處理函數(shù)，這沒啥，但是兩個狀態(tài)明顯不一樣，所以要兩個變量來保存，在item對象上再添加一個字段，eg：value，點擊的時候把單個屬性data存進去，最后比較v-bind:class="{ activation:data==item.value}",就可以了

2017年3月16日 08:21
編輯回答
厭惡我
<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 傳進去

2017年11月11日 02:33