js中的class在vue中怎么写
时间: 2024-05-12 12:18:49 浏览: 45
在Vue中,可以使用以下方式来定义class:
1. 使用对象语法:可以在模板中直接使用对象来指定class,例如:
```
<template>
<div :class="{ active: isActive }"></div>
</template>
<script>
export default {
data() {
return {
isActive: true
}
}
}
</script>
```
2. 使用数组语法:可以在模板中使用数组来指定多个class,例如:
```
<template>
<div :class="[activeClass, errorClass]"></div>
</template>
<script>
export default {
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
}
</script>
```
3. 使用计算属性:可以在计算属性中根据组件的状态来动态计算class,例如:
```
<template>
<div :class="computedClass"></div>
</template>
<script>
export default {
data() {
return {
isActive: true
}
},
computed: {
computedClass() {
return this.isActive ? 'active' : ''
}
}
}
</script>
```