引言

動態(tài)添加類名是經(jīng)常會用到但不起眼的一個小功能，使用靈活的話能夠方便的實現(xiàn)各種動態(tài)效果，比如：元素的顯示隱藏，菜單切換等等。

動態(tài)添加類名方法總結(jié)

可以通過對象、數(shù)組、方法返回值3種方法動態(tài)添加類名，話不多說，直接上代碼：

<template>
  <div>
    <!-- 對象方式 -->
    <div :class="{'fontColor': true}">對象方式添加類名</div>
    <div :class="{'fontColor': true, 'borderStyle': true}">對象方式添加類名</div>
    <div :class="{'fontColor': num===1}">對象方式添加類名</div>

    <!-- 數(shù)組方式 -->
    <div :class="[className1, className2]">數(shù)組方式添加類名</div>
    <div :class="[num===1 ? 'fontColor' : 'borderStyle']">數(shù)組方式添加類名</div>
    <div :class="[{'fontColor': true}, className2]">數(shù)組方式添加類名</div>

    <!-- 函數(shù)返回值方式 -->
    <div :class="setClass">函數(shù)返回值方式</div>
  </div>
</template>

<script>
  export default {
    name:'app',
    data() {
      return {
        num: 1,
        className1: 'fontColor',
        className2: 'borderStyle',
      }
    },
    methods: {
      setClass(){
        return 'fontColor'
      }
    }
  }
</script>

<style>
  .fontColor{
    color: red;
  }
  .borderStyle{
    border: solid 1px red;
  }
</style>

應(yīng)用——點擊切換菜單效果

vue動態(tài)添加類名的應(yīng)用之一便是實現(xiàn)點擊切換菜單效果，例如：

點擊切換菜單效果圖.png

還是直接上代碼：

<template>
  <div>
    <ul>
      <li  v-for="(item,index) in list" @click="addClass(index)" ：class="{'activeClass':index===currentIndex}">{{item.type}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name:"app",
    data(){
      return{
        currentIndex:0,
        list:[
          {type:"全部"}, 
          {type:"待付款"}, 
          {type:"待使用"}, 
          {type:"待評價"}, 
          {type:"退款/售后"}, 
        ] 
      }
    },
    methods:{
      addClass(index){
        // 點擊的時候同步index和currentIndex,實現(xiàn)activeClass的添加與刪除，從而實現(xiàn)切換的動態(tài)效果
        this.currentIndex = index
      }
    }
    
  }
</script>

<style scope>
  .activeClass {
    border-bottom: 2px solid #238AFF;
  }
</style>

這里只展示了動態(tài)切換菜單的核心代碼，其他樣式需讀者自行添加修改。
ps: 本人才疏學淺，若有考慮不周之處，歡迎各路大神指正！非常感謝！