Class 与 Style 绑定

Vue3 中的 class 与 style 绑定

在 Vue3 中，可以通过 v-bind 指令将 class 和 style 绑定到元素上

在 Vue 3 中使用 ​setup​ 函数和 Composition API 的方式来进行 class 和 style 的绑定。通过创建对应的响应式变量或计算属性，并在 ​return​ 语句中将其暴露出去，就可以在模板中绑定这些变量和属性。

Class 绑定

你可以通过对象语法、数组语法和动态类名绑定来绑定 class 属性。

对象语法

<template>
  <div :class="classes"></div>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const isActive = ref(true);
      const hasError = ref(false);

      // 使用对象语法定义样式类
      const classes = {
        active: isActive.value,
        "text-danger": hasError.value,
      };

      return {
        classes,
      };
    },
  };
</script>

数组语法

<template>
  <div :class="classes"></div>
</template>

<script>
  import { ref, computed } from "vue";

  export default {
    setup() {
      const isActive = ref(true);
      const hasError = ref(false);

      // 使用计算属性返回样式类数组
      const classes = computed(() => [
        isActive.value ? "active" : "",
        hasError.value ? "text-danger" : "",
      ]);

      return {
        classes,
      };
    },
  };
</script>

Style 绑定

你可以通过对象语法、数组语法和动态样式绑定来绑定 style 属性。

对象语法

<template>
  <div :style="styles"></div>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const activeColor = ref("red");
      const fontSize = ref(16);

      // 使用对象语法定义样式
      const styles = {
        color: activeColor.value,
        fontSize: `${fontSize.value}px`,
      };

      return {
        styles,
      };
    },
  };
</script>

数组语法

<template>
  <div :style="styles"></div>
</template>

<script>
  import { ref, computed } from "vue";

  export default {
    setup() {
      const fontSize = ref(16);

      // 使用计算属性返回样式数组
      const styles = computed(() => [
        {
          color: "red",
          fontSize: `${fontSize.value}px`,
        },
        {
          fontWeight: "bold",
        },
      ]);

      return {
        styles,
      };
    },
  };
</script>

注意，在使用 setup 函数时，需要导入正确的依赖（import { ref, computed } from 'vue';）