vue2 pug 动态class

在Vue2中使用Pug动态添加class的方法如下：

可以使用Vue的动态绑定语法，使用冒号(:)来绑定class属性。例如，如果你有一个data属性叫做`isActive`，你可以通过以下方式来动态添加class：

<template lang="pug">
  div(:class="{ active: isActive }")
</template>

这样，当`isActive`为true时，就会给div元素添加一个名为`active`的class。

相关问题

vue2动态绑定class

在Vue2中，可以通过v-bind指令来动态绑定class。有两种方式可以实现动态绑定class：使用对象语法和使用字符串语法。

1. 对象语法：
可以使用v-bind:class指令将一个对象传递给class属性，对象的键表示class名称，值表示是否将该class应用于元素。
例如，可以按照下面的方式动态绑定class：

<div v-bind:class="{ active: isActive }">class动态绑定</div>

然后在Vue实例的data选项中定义名为isActive的属性，并根据需要更改其值：

export default {
  data() {
    return {
      isActive: true
    }
  }
}

这样，当isActive为true时，元素将应用active类。

2. 字符串语法：
可以使用v-bind:class指令将一个字符串变量绑定到class属性。
例如，可以按照下面的方式动态绑定class：

<div v-bind:class="className">class动态绑定</div>

然后在Vue实例的data选项中定义名为className的属性，并根据需要更改其值：

export default {
  data() {
    return {
      className: 'app'
    }
  }
}

这样，className的值将作为class应用于元素。

vue2动态class

Vue2中可以使用动态class绑定来根据条件动态添加或删除类。你可以通过在模板中使用v-bind:class指令来实现。

以下是一个示例：

<template>
  <div :class="{ active: isActive, 'text-red': isError }">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  }
};
</script>

在上面的示例中，`isActive`和`isError`是组件的data属性，它们控制了是否应用相应的类。当`isActive`为`true`时，会添加名为"active"的类；当`isError`为`true`时，会添加名为"text-red"的类。

你也可以在对象中使用动态类名的表达式，例如：

<template>
  <div :class="classObject">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-red': false
      }
    };
  }
};
</script>

上面的示例中，使用了一个名为`classObject`的data属性，它是一个对象，其中的键表示类名，值表示是否应用该类。在这个例子中，"active"类会始终被应用，而"text-red"类不会被应用。

你还可以通过计算属性来动态生成类名。例如：

<template>
  <div :class="computedClasses">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isError: false
    };
  },
  computed: {
    computedClasses() {
      return {
        active: this.isActive,
        'text-red': this.isError
      };
    }
  }
};
</script>

在上面的示例中，`computedClasses`是一个计算属性，根据`isActive`和`isError`的值动态生成类名对象。

这些是Vue2中动态class绑定的一些常见用法，你可以根据具体需求来选择适合你的方法。