vue写tab切换

一、循环列表渲染时：

1. 点击传入index，用当前索引判断class的切换

<ul v-if="isPriceShow">
      <li
          v-for="(item, index) in showPrice"
          :key="index"
          :class="{ selectedPrice: index === priceIndex }"
          @click="handleSelectPrice(index)"
        >
           {{ item }}
        </li>
 </ul>

2. data中添加priceIndex 属性和priceData

data () {
    return {
        priceIndex : 0,
        priceData: {
        dayRentPrice: ['￥100/天起', '￥200/天起', '￥300/天起', '￥400/天起'],
        monthRentPrice: [
          '￥1000/天起',
          '￥2000/天起',
          '￥3000/天起',
          '￥4000/天起',
        ],
        yearRentPrice: [
          '￥5000/天起',
          '￥6000/天起',
          '￥7000/天起',
          '￥8000/天起',
        ],
      },
    }
}

3. computed里写列表切换

computed: {
    showPrice () {
      if (this.currentTab === 0) {
        return this.priceData.dayRentPrice
      } else if (this.currentTab === 1) {
        return this.priceData.monthRentPrice
      } else if (this.currentTab === 2) {
        return this.priceData.yearRentPrice
      }
    },
  },

4. methods里写点击事件更新当前下标

methods:{
      handleSelectPrice (index) {
            this.priceIndex = index
      },
}

5. css样式

.selectedPrice {
     background-color: #dae3f3;
     border: 1px solid #5d98f7;
}

二、非列表循环

1. 在标签内写入点击事件和添加的class样式

<li :class="{ switch: activeIndex === 0 }" class="car-model" @click="handleSwitchLiOne">one</li>
<li :class="{ switch: activeIndex === 1 }" class="car-model" @click="handleSwitchLiTwo ">two</li>
<li :class="{ switch: activeIndex === 2 }" class="car-model" @click="handleSwitchLiThree ">three</li>

2. data里定义activeIndex

data(){
    return {
        activeIndex :0
    }
}

3. methods定义切换方法

methods:{
     handleSwitchLiOne () {
      this.activeIndex = 0
    },
    handleSwitchLiTwo () {
      this.activeIndex = 1
    },
    handleSwitchLiThree () {
      this.activeIndex = 2
    },
}

4. css样式

.switch {
     background-color: #fff;
}