Vue动态绑定class的两种方式

vue提供动态绑定class的方法，根据属性控制控制class的显示与隐藏。

testStyle,testStyle2是类名，是否在元素中引用该类，取决于后面的方法（属性）传递回来的值（true 或 false）

用法实例：

<template>
  <div>
    <div :class="{testStyle:testComputed}">123</div>
    <div :class="{testStyle2:testMethod}">456</div>
    
    <!-- 传递参数,推荐使用methods控制,computed需要写闭包 -->
    <div v-for="(item, index) in tableData" :key="index" :class="{testStyle:testComputed2(item)}">123</div>
    <div v-for="(item, index) in tableData" :key="index" :class="{testStyle2:testMethod2(item)}">123</div> 
  </div>
</template>

<script>
export default {
  name: "computed",
  data() {
    return {
      test: false,
      tableData: [true, false, true],
    };
  },
  methods: {
    testMethod() {
      return true;
    },
    testMethod2(flag) {
        return flag;
    }
  },
  computed: {
    testComputed: () => {
        return true;
    },
    testComputed2: () => {
        return item => {
            return item;
        }
    }
  },
};
</script>

<style  scoped>
.testStyle {
  color: red;
}
.testStyle2 {
  color: blue;
}
</style>

           

如果需要在绑定的方法中传递参数，推荐写到methods中，这种方式的代码更加简洁易懂。使用computed传参用到了闭包的概念。