vue3动态class多重三元
时间: 2023-10-25 19:09:29 浏览: 119
vue中动态添加class类名的方法
在Vue 3中,你可以使用多重三元表达式来动态设置元素的class。下面是一个示例:
```vue
<template>
<div :class="[
isActive ? 'active' : '',
isHighlighted ? 'highlighted' : '',
hasError ? 'error' : ''
]">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isHighlighted: false,
hasError: true
};
}
};
</script>
<style>
.active {
background-color: blue;
}
.highlighted {
font-weight: bold;
}
.error {
color: red;
}
</style>
```
在上面的示例中,我们使用了多个三元表达式来根据不同的条件动态地添加class。只有当条件为`true`时,对应的class才会被添加到元素上。你可以根据自己的需求添加或修改条件和对应的class名称。
阅读全文