關于vue動態(tài)生成的如何去點擊當前項生效

1.因為普通快遞和上門自提這一欄都是遍歷生成的，所以可能有多項，當我點擊普通快遞的時候，其他項也跟著激活了，這該如何區(qū)分才好，并且還有個是我點擊上門自提時，普通快遞的下邊內容是要隱藏的，將上門自提的內容顯示出來，這個需求又搞不定，作為一個純小白，大佬給點提示

2.這是我的代碼

     <ul v-for="(item,index) in orderList" :key="item.id" class="order_list">
      <div class="order_store">
        <i class="mui-icon-extra icon-dianpu1" style="font-size:18px"></i>
        <span>{{item.store}}</span>
      </div>
      <li v-for="list in item.orderGoodList" :key="list.id">
        <div class="order_img">
          <img :src="list.imgUrl"
            alt="">
        </div>
        <div class="order_info">
          <p>{{list.name}}
          </p>
          <span>{{list.size}}</span>
          <div class="order_info_price clearfix">
            <strong>￥{{list.price}}</strong>
            <i class="order_info_num">×{{list.num}}</i>
          </div>
        </div>
      </li>
      <div class="order_express clearfix">
        <div>配送方式</div>
        <div>
          <a @click="show" :class="showTab?'active':''" href="javascript:;">普通快遞</a>
          <a @click="show" :class="!showTab?'active':''" href="javascript:;">上門自提</a>
        </div>
        <p v-if="showTab">普通快遞：￥{{item.expressPrice}}</p>
        <p v-if="!showTab">您可以選擇離您最近的自提點上門提貨，到店自提免運費</p>
      </div>
      <div class="order_message">
        <span>買家留言：</span>
        <textarea placeholder="選填，可填寫您與賣家達成一致的要求"></textarea>
      </div>
    </ul>
      
       methods: {
  show(){
    this.showTab = !this.showTab
  },

3. 圖片描述

4.拜托了，各位大佬

回答

編輯回答

影魅

多項遍歷的話，可以選擇加一個index下標。

<div>配送方式</div>
        <div>
          <a @click="show(index)" :class="showTab&&click_index===index?'active':''" href="javascript:;">普通快遞</a>
          <a @click="show(index)" :class="!showTab&&click_index===index?'active':''" href="javascript:;">上門自提</a>
        </div>
        <p v-if="showTab&&click_index===index">普通快遞：￥{{item.expressPrice}}</p>
        <p v-if="!showTab&&click_index===index">您可以選擇離您最近的自提點上門提貨，到店自提免運費</p>
      </div>
 data(){
return {
click_index: -1
}
},     
methods: {
  show(index){
    this.showTab = !this.showTab;
    this.click_index = index;
  },

2017年8月19日 14:38

編輯回答