vue中class和style设置的相关方法-优快云博客

本文介绍了如何在Vue.js中使用不同方式实现元素样式的动态绑定，包括使用`:class`和`:style`进行条件渲染，以及如何通过Vue实例的数据属性来控制这些样式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class&style样式设置

class

html代码

<div id="box">
    <strong>阿斯顿发</strong>
</div>

css代码

.red {
    color: red;
}
.gray {
    background-color: gray;
}

js代码

window.onload = function() {
    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray'
        }
    });
}

样式生效的写法

:class="[red, gray]" 调用的是vue参数里的data属性
```
<strong :class="[red, gray]"></strong>       
```

:class="{red: true, gray: true}"

<strong :class="{red: true, gray: true}"></strong>

第二种方法也是可以调用vue参数了的data属性的,记住，Vue里面一切皆是数据

new Vue({
    el: '#box',
    data: {
       red: 'red',
       gray: 'gray',
       a: true,
       b: false
 }   
});

<strong :class="{red: a, gray: b}"></strong>

:class="json",第二种方法的精简版，官方版本

new Vue({
    el: '#box',
    data: {
        red: 'red',
        gray: 'gray',
        json: {
            a: true,
            b: false
        }
    }
});

<strong :class="json"></strong>

style

和class基本相同

:style="{}"

<strong :style="{color: 'red', backgroundColor: 'gray'}"></strong>

:style="a"

new Vue({
    el: '#box',
    data: {
        red: 'red',
        gray: 'gray',
        a: {
            color: 'red',
            backgroundColor: 'gray' //注意复合样式的书写规范
        }
    }
});

<strong :style="a">阿斯顿发</strong>

:style="[a, b]", a, b对应的是data里的两个json数据