Vue中如何使用v-bind:class动态绑定类名-Vue.js-PHP中文网

Vue中如何使用v-bind:class动态绑定类名

王林

发布： 2023-06-11 11:36:08

原创

1784人浏览过

vue是一款流行的javascript框架，具有易用性和高效性。在vue中，v-bind:class方法是非常有用的一个指令，可以用于动态地绑定类名。

v-bind:class可以让我们通过计算属性来动态地设置元素的类。下面是一个示例代码，用于演示如何使用v-bind:class来动态地设置类名。

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

<script>
export default {
  data() {
    return {
      isActive: true,
      error: null
    }
  },

  computed: {
    classObject: function() {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal'
      }
    }
  }
}
</script>

登录后复制

在上面的代码中，我们定义了一个计算属性classObject，这个计算属性返回一个对象，对象里的键就是类名。

我们还定义了两个数据属性isActive和error，这些属性的值将影响classObject的返回值。如果isActive属性为true，且error属性为null，则classObject将返回 { active: true }，这会给该元素添加一个名为“active”的类。

同样的，如果error属性不为null，且error.type属性的值为“fatal”，则classObject将返回 { 'text-danger': true }，这会给该元素添加一个名为“text-danger”的类。