2021-07-06 使用v-bind设置样式属性:class与style设置元素样式

最新推荐文章于 2025-02-10 10:34:05 发布

前端OnTheRun

最新推荐文章于 2025-02-10 10:34:05 发布

阅读量692

点赞数

分类专栏： vue 文章标签： vue css bind v-bind class

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/118493720

版权

vue 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了Vue中如何使用v-bind:class和v-bind:style来动态设置元素样式。v-bind:class可以接受对象、数组、计算属性等不同形式的数据，实现动态切换class。而v-bind:style则可以直接设置样式，也可以绑定到样式对象或数组，甚至处理需要前缀的CSS属性。

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

v-bind:class设置样式

1.为v-bind:class设置一个对象,实现动态切换class

示例

html:

<div id="app">
	<div v-bind:class="{'box':xianshi}">hello</div>
</div>

css:

.box {color: yellow;}

js:

new Vue({
    el: "#app",
    data: {xianshi: true}//false就不显示
});

2.在对象中传入更多属性,动态切换更多的class

示例

html:

<div id="app">
	<div v-bind:class="{'box1':yangshi1,'box2':yangshi2}">hello</div>
</div>

css:

.box1 {color: red;}
.box2 {color: blue;}

js:

new Vue({
    el: "#app",
    data: {
        yangshi1: true,
        yangshi2: false
        /*哪个true就输入哪个,且后面的样式权重高,都是false则不显示样式*/
    }
});

3.直接绑定数据里的一个对象

示例:

html:

<div id="app">
	<div v-bind:class="obj">hello</div>
</div>

css:

.box {color: red;}

js:

new Vue({
    el: "#app",
    data: {obj:{"box":true}}
});

4.绑定返回对象的计算属性

示例:

html:

<div id="app"><div v-bind:class="obj">hello</div></div>

css:

.box1 {background: green;}
.box2 {background: red;}

js:

new Vue({
    el: '#app',
    data: {
        show1: true,
        judge: {
            show2: false,
            error: 'cuowu'
        }
    },
    computed: {//计算属性
        obj: function() {
            return {
                box1: this.show1 && !this.judge.show2,
                box2: this.judge.show2 && this.judge.error === 'cuowu',
            }
        }
    }
})

5.把一个数组传给v-bind:class

示例

html:

<div id="app">
	<div v-bind:class="[sub1,sub2]">hello</div>
</div>

css:

.box1 {background: green;} 
.box2 {background: red;}

js:

new Vue({
    el: "#app",
    data: {
        sub1: 'box1',
        sub2: 'box2'
    }
});

输出:

hello

6.使用三元表达式来切换列表中的class

示例

html:

<div id="app">
	<div v-bind:class="[sub1,judge?sub2:'']">hello</div>
</div>

css:(同上)
js:

new Vue({
    el: "#app",
    data: {
        judge: true,
        sub1: "box1",
        sub2: "box2"
    }
});

v-bind:style设置样式

1.style直接设置样式

示例

html:

<div id="app">
	<div v-bind:style="{color:c,fontSize:fs+'px'}">hello</div>
</div>

js:

new Vue({
    el: "#app",
    data: {
        c: 'red',
        fs: 18
    }
});

2.直接绑定到一个样式对象上

示例

html:

<div id="app">
	<div v-bind:style="Obj">hello</div>
</div>

js:

new Vue({
    el: "#app",
    data: {
        Obj: {
            color: 'red',
            fontSize: '28px'
        }
    }
});

3.使用数组将多个样式对象应用到一个元素上

示例

html:

<div id="app">
	<div v-bind:style="[sub1,sub2]">hello</div>
</div>

js:

new Vue({
    el: "#app",
    data: {
        sub1: {color: "green"},
        sub2: {
            fontSize: "20px",
            "font-weight": "bolder"
        }
    }
});