vue3 通过计算属性动态设置class

在 Vue3 中，你可以使用计算属性来动态设置 class。具体实现方法如下：

1. 在组件中定义计算属性，例如：

<script>
  import { computed } from 'vue';
  
  export default {
    setup() {
      const isActive = computed(() => {
        // 根据某些条件判断是否添加 active 类名
        return true;
      });
      
      return {
        isActive,
      };
    },
  };
</script>

2. 在模板中使用计算属性来设置 class，例如：

<template>
  <div :class="{ 'active': isActive }">...</div>
</template>

上述代码中，我们使用了 Vue3 新增的 `:class` 语法来动态绑定 class，然后将一个对象传递给 `:class`，对象的 key 为 class 名称，value 为是否添加该 class 的条件，这里我们使用了计算属性 `isActive` 来动态设置 value。如果 `isActive` 的值为 true，则会添加 `active` 类名。

相关问题

vue 动态设置class

以下写法都是正确的：

1. 对象语法：

<div :class="{ active: isActive }"></div>

2. 数组语法：

<div :class="[activeClass, errorClass]"></div>

3. 绑定一个返回对象的计算属性：

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

4. 直接绑定一个对象：

<div :class="{'active': isActive, 'text-danger': hasError}"></div>

vue动态设置class

在Vue中动态设置class有多种方式。以下是一些常用的方法：

1. 使用对象语法：您可以根据条件动态添加或删除class。在模板中，您可以使用v-bind来绑定一个对象，该对象的键是class名，值是一个布尔值，用于指示是否应该应用该class。例如：

<div v-bind:class="{ 'active': isActive, 'error': hasError }"></div>

在上面的例子中，如果isActive为true，则会添加active class；如果hasError为true，则会添加error class。

2. 使用数组语法：您可以将一个包含class名的数组绑定到v-bind:class，这样可以根据多个条件动态设置class。例如：

<div v-bind:class="[isActive ? 'active' : '', hasError ? 'error' : '']"></div>

在上面的例子中，如果isActive为true，则添加active class；如果hasError为true，则添加error class。

3. 使用计算属性：您可以创建一个计算属性来返回一个对象或数组，并将其绑定到v-bind:class。计算属性可以根据不同的条件返回不同的class名。例如：

<div v-bind:class="classObject"></div>

data() {
  return {
    isActive: true,
    hasError: false
  }
},
computed: {
  classObject() {
    return {
      'active': this.isActive,
      'error': this.hasError
    }
  }
}

在上面的例子中，如果isActive为true，则添加active class；如果hasError为true，则添加error class。

这些是Vue中动态设置class的几种常用方法，您可以根据自己的需求选择适合的方法。