Vue中关于v-bind绑定样式的正确写法
时间: 2023-07-09 22:46:30 浏览: 115
vue动态绑定 class 的丰富案例
Vue中关于v-bind绑定样式的正确写法是:
```html
<div v-bind:class="{active: isActive}"></div>
```
其中,`isActive`是一个布尔值,如果它的值为`true`,则会给该`div`元素添加一个`active`的类。如果`isActive`的值为`false`,则不会添加该类。
除了上面的写法之外,还可以采用以下写法:
```html
<div v-bind:class="classObject"></div>
```
其中,`classObject`是一个对象,它的属性名表示类名,属性值表示该类名是否应该被应用。例如:
```javascript
data: {
classObject: {
active: true,
'text-danger': false
}
}
```
上面的代码表示给该`div`元素添加`active`类,但不添加`text-danger`类。
阅读全文