vue判断class存在

你可以使用Vue中的`:class`指令结合三元表达式来判断一个class是否存在，例如：

<div :class="{'my-class': isExist, 'other-class': !isExist}"></div>

其中，`isExist`是一个data中的变量，当`isExist`为`true`时，该元素会添加`my-class`类名，否则添加`other-class`类名。

相关问题

vue refs classList 判断某个css 是否存在

可以使用Vue的`$refs`获取到DOM元素的引用，然后使用`classList`属性来判断某个CSS类是否存在。具体实现如下：

<template>
  <div ref="myDiv" class="my-class"></div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv;
    if (myDiv.classList.contains('my-class')) {
      console.log('my-class exists');
    } else {
      console.log('my-class does not exist');
    }
  },
}
</script>

在上面的例子中，我们在`mounted`钩子函数中获取到了`myDiv`元素的引用，然后使用`classList.contains`方法来判断`my-class`类是否存在。如果存在，打印`my-class exists`，否则打印`my-class does not exist`。

vue 动态控制 class

在 Vue 中，可以通过绑定 class 属性来动态控制 class。具体方法如下：

1. 使用对象语法
可以使用一个对象来绑定 class，对象的属性名是 class 名称，属性值是一个 boolean 值，用于判断 class 是否生效。例如：

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

在这个例子中，如果 isActive 为 true，则 div 元素会应用 active 类名。

2. 使用数组语法
可以使用一个数组，将多个 class 名称绑定在一起，例如：

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

在这个例子中，activeClass 和 errorClass 都是字符串，代表两个 class 名称，如果它们都存在，div 元素会应用这两个类名。

3. 使用计算属性
可以使用计算属性来动态计算 class 名称。例如：

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

在这个例子中，computedClass 是一个计算属性，它会根据一些条件计算出一个字符串作为 class 名称，例如：

computed: {
  computedClass: function () {
    return this.isActive ? 'active' : 'inactive'
  }
}

在这个例子中，如果 isActive 为 true，则计算属性会返回 'active'，div 元素会应用 active 类名。如果 isActive 为 false，则计算属性会返回 'inactive'，div 元素会应用 inactive 类名。