9.Vue2.x 绑定样式

9.Vue2.x 绑定样式—style

文章目录

- 条件样式

条件样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>绑定样式</title><script type="text/javascript" src="../js/vue.js"></script><style>.classA {border: 3px solid black;}.classB {background-color: skyblue;}.classC {color: red;}.classD {text-shadow: 2px 2px 3px yellow;}</style></head><body><!-- 1.绑定class样式:class="xxx"  xxx可以是字符串，对象，数据2.绑定style样式:style="{color: activeColor, fontSize: fontSize + 'px'}"其中activeColor/fontSize是data属性--><!-- 准备好一个容器 --><div id="root"><!-- <h2 class="classA classB classC classD">过年好</h2> --><!-- class的字符串写法，适用于：类名不确定，要动态获取 --><h2 class="classA" :class="myStyle">{{title}}</h2><!-- class的对象写法，适用于：类名确定，但不确定用不用 --><h2 class="classA" :class="{classC:hasC, classD:hasD}">{{title}}</h2><!-- class的三元表达式，适用于：类名确定，但不确定用不用 --><h2 class="classA" :class="hasC ? 'classC' : ''">{{title}}</h2><!-- class的数组写法，适用于：同时使用多个class --><h2 class="classA" :class="[b,c,d]">{{title}}</h2><!-- 绑定style --><h2 class="classA" :class="[b,c,d]" :style="{fontSize:size}">{{title}}</h2></div><script>new Vue({el: "#root",data: {title: "大家过年好",myStyle: "classB",hasC: false, // 表示是否使用ClassC的样式hasD: true, // 表示是否使用ClassD的样式b: "classB",c: "classC",d: "classD",size: "40px",},});</script></body>
</html>