Vue绑定style和class 对象写法

适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

 绑定 class 样式【对象写法】：

.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.border{border: 20px solid red;
}
.radius{border-radius: 25px;
}

<div id="APP"><div class="box" :class="classObj">多个class样式</div>
</div>

const vm = new Vue({el: "#APP",data(){return {classObj:{aqua: true,border: false,radius:false}}}
});

注：对象写法中的键名必须是 class 类名，值如果为 true 表示使用，如果为 false 表示不使用。当然我们也可以动态修改它的值，选择是否使用。

对象写法也可以直接写在标签中，例：

.box{width: 100px;height: 100px;
}
.aqua{background-color: aqua;
}
.border{border: 20px solid red;
}
.radius{border-radius: 25px;
}

<div id="APP"><div class="box" :class="{aqua:a, border:b, radius:c}">多个class样式</div>
</div>

注：效果与上边的示例相同，a、b、c 都是变量，控制是否使用某个 class 样式。

 绑定 style 样式【对象写法】 ：

<div id="APP"><div :style="styleObj">绑定style样式</div>
</div>

const vm = new Vue({el: "#APP",data(){return {styleObj:{width: '100px',height: '100px',backgroundColor: "aqua"}}}
});

注：动态绑定 style 样式时，属性必须使用小驼峰命名法，例如：backgroundColor 。 

绑定 style 样式【数组写法】：

<div id="APP"><div :style="styleArr">绑定style样式</div>
</div>

const vm = new Vue({el: "#APP",data(){return {styleArr:[{width: "100px",height: "100px"},{backgroundColor: "aqua",border:"20px solid red"}]}}
});

注：使用数组写法绑定 style 样式时，数组其实是由多个 样式对象 组成的。

数组写法也可以直接写在标签中，与上面示例的效果相同。

<div id="APP"><div :style="[styleObj1,styleObj2]">绑定style样式</div>
</div>

const vm = new Vue({el: "#APP",data(){return {styleObj1:{width: "100px",height: "100px"},styleObj2:{backgroundColor: "aqua",border:"20px solid red"}}}
});

原创作者：吴小糖

创作时间：2023.10.13