vue怎么让class里有两个值
时间: 2024-02-03 22:14:01 浏览: 22
在 Vue 中,你可以使用绑定语法 `v-bind:class` 来设置一个元素的 class 属性。如果你想让一个元素的 class 属性中有两个值,可以使用数组语法。例如:
```html
<template>
<div v-bind:class="[buttonClass, 'btn-primary']">Click me!</div>
</template>
<script>
export default {
data() {
return {
buttonClass: 'btn',
};
},
};
</script>
```
在上面的例子中,`v-bind:class` 绑定一个数组,数组中包含了一个变量 `buttonClass` 和一个字符串 `'btn-primary'`。这意味着,当 `buttonClass` 的值为 `'btn'` 时,元素的 class 属性会被设置为 `'btn btn-primary'`。
相关问题
vue 绑定两个class
你可以使用对象语法来绑定两个 class,例如:
```
<div :class="{ 'class1': condition1, 'class2': condition2 }"></div>
```
其中,condition1 和 condition2 是绑定的条件,如果满足条件,则对应的 class 会被应用到该元素上。例如,如果 condition1 为 true,condition2 为 false,则该元素会应用 class1。
你也可以将多个 class 名称放在一个数组中来绑定多个 class,例如:
```
<div :class="['class1', 'class2']"></div>
```
这样会将 class1 和 class2 都应用到该元素上。
vue 动态绑定两个class
以下写法都是正确的:
1. 对象语法:
```
<div :class="{ active: isActive }"></div>
```
2. 数组语法:
```
<div :class="[activeClass, errorClass]"></div>
```
3. 绑定一个返回对象的计算属性:
```
<div :class="classObject"></div>
```
4. 直接绑定一个对象:
```
<div :class="{'active': isActive, 'text-danger': hasError}"></div>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)