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

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.直接绑定数据里的一个对象