vue :class 里用计算属性

在Vue的:class指令中使用计算属性是很常见的。计算属性可以根据你定义的逻辑返回一个动态的类名字符串或对象。

首先，在Vue组件中定义一个计算属性。计算属性可以基于组件的数据进行计算，并返回一个新的值。例如，假设你有一个data属性`isActive`，你可以在计算属性中根据其值返回一个类名字符串或对象。

data() {
  return {
    isActive: true
  };
},
computed: {
  activeClass() {
    return {
      active: this.isActive
    };
  }
}

然后，你可以在:class指令中使用这个计算属性。:class指令接受一个对象或字符串作为值，对象的key是类名，值是一个布尔值，表示该类名是否应用于元素。

<div :class="activeClass"></div>

上述代码中，如果`isActive`为true，则动态添加`active`类名到`<div>`元素上。

你还可以在计算属性中返回一个类名字符串，以实现更复杂的逻辑。例如：

computed: {
  activeClass() {
    if (this.isActive) {
      return 'active';
    } else {
      return 'inactive';
    }
  }
}

<div :class="activeClass"></div>

上述代码中，如果`isActive`为true，则添加`active`类名，否则添加`inactive`类名。

这样，你就可以根据需要动态地在:class指令中使用计算属性来添加类名了。