引言

动态添加类名是经常会用到但不起眼的一个小功能，使用灵活的话能够方便的实现各种动态效果，比如：元素的显示隐藏，菜单切换等等。

---

动态添加类名方法总结

可以通过对象、数组、方法返回值3种方法动态添加类名，话不多说，直接上代码：

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

    <!-- 数组方式 -->
    <div :class="[className1, className2]">数组方式添加类名</div>
    <div :class="[num===1 ? 'fontColor' : 'borderStyle']">数组方式添加类名</div>
    <div :class="[{'fontColor': true}, className2]">数组方式添加类名</div>

    <!-- 函数返回值方式 -->
    <div :class="setClass">函数返回值方式</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>

---

应用——点击切换菜单效果

vue动态添加类名的应用之一便是实现点击切换菜单效果，例如：

点击切换菜单效果图.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,实现activeClass的添加与删除，从而实现切换的动态效果
        this.currentIndex = index
      }
    }
    
  }
</script>

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

这里只展示了动态切换菜单的核心代码，其他样式需读者自行添加修改。
ps: 本人才疏学浅，若有考虑不周之处，欢迎各路大神指正！非常感谢！