vue中动态绑定类名v-bind:class的几种常见的用法（以导航菜单点击高亮为例讲解）

问题描述

vue中动态绑定类名:class的用法比较灵活，本案例以导航菜单点击高亮为例，简单进行讲解，我们先看一下最终的效果图。

方式一（对象写法）

代码图示如下

代码附上

<template>
  <div id="app">
    <div class="nav">
      <div
        class="item"
        :class="{ 'highLight': index == highLight }"
        v-for="(item, index) in navArr"
        :key="index"
        @click="changeHighLight(index)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navArr: ["导航一", "导航二", "导航三", "导航四", "导航五", "导航六"],
      highLight: 0,
    };
  },
  methods: {
    changeHighLight(index) {
      this.highLight = index;
    },
  },
};
</script>
<style lang="less" scoped>
.nav {
  width: 240px;
  height: 100%;
  .item { width: 100%; height: 50px; background-color: #e9e9e9;
          line-height: 50px; text-align: center; cursor: pointer; }
  .item:hover { background-color: #faf; }
  .highLight {
    background-color: #faf;
  }
}
</style>

方式二（methods写法）

代码图示如下

代码附上

<template>
  <div id="app">
    <div class="nav">
      <div
        class="item" :class="fn(index)"
        v-for="(item, index) in navArr"
        :key="index" @click="changeHighLight(index)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navArr: ["导航一", "导航二", "导航三", "导航四", "导航五", "导航六"],
      highLight: 0,
    };
  },
  methods: {
    fn(index) {
      if (index == this.highLight) { return "highLight"; }
    },
    changeHighLight(index) {
      this.highLight = index;
    },
  },
};
</script>
<style lang="less" scoped>
.nav {
  width: 240px; height: 100%;
  .item {
    width: 100%; height: 50px; background-color: #e9e9e9;
    line-height: 50px; text-align: center; cursor: pointer;
  }
  .item:hover { background-color: #faf; }
  .highLight { background-color: #faf; }
}
</style>

方式三（computed写法）

计算属性的写法和methods的写法略有不同，请看注释

代码附上

<template>
  <div id="app">
    <div class="nav">
      <div class="item" :class="eee(index)" v-for="(item, index) in navArr"
        :key="index" @click="changeHighLight(index)" >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navArr: ["导航一", "导航二", "导航三", "导航四", "导航五", "导航六"],
      highLight: 0,
    };
  },
  computed: {
    /* 直接这样写就会报错： Error in render: "TypeError: _vm.eee is not a function"
       计算属性和方法的写法略有不同，计算属性里面要return 一个函数*/
    // eee(index){
    //   if(index == this.highLight){
    //     return "highLight"
    //   }else{
    //     return "kkk"
    //   }
    // }
    // 正确写法,如果计算属性要接收参数，要return一个函数，在这个函数里面接收参数，并return对应的值
    //          如果不接收参数，直接return值即可
    eee() {
      return (index) => {
        if (index == this.highLight) {
          return "highLight";
        }
      };
    },
  },
  methods: {
    changeHighLight(index) { this.highLight = index; },
  },
};
</script>
<style lang="less" scoped>
.nav {
  width: 240px; height: 100%;
  .item { width: 100%; height: 50px; background-color: #e9e9e9; line-height: 50px; text-align: center; cursor: pointer; }
  .item:hover { background-color: #faf; }
  .highLight { background-color: #faf; }
}
</style>

总结

:class除了上述三种写法以外，还有数组的写法、三元表达式的写法。不过我个人觉得，别的写法和上述介绍的写法都类似，触类旁通。灵活运用上述三种写法，基本上可以解决绝大多数的问题场景

好记性不如烂笔头，记录一下。最后附上官方文档的地址：
https://cn.vuejs.org/v2/guide/class-and-style.html