Vue（十一）：样式绑定——:class 和 :style
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绑定样式</title> <script type="text/javascript" src="../js/vue.js"></script> <!-- 绑定样式： 1.绑定class样式： 写法：:class="xxx"，xxx可以是字符串、对象、数组 字符串写法适用于：样式类名不确定的情况 对象写法适用于：样式个数、类名都确定的情况，但需要动态决定这些样式用不用 数组写法适用于：样式个数、类名都不确定的情况 2.绑定style样式： 写法：:style="xxx"，xxx可以是对象，也可以是数组 注意：需要注意的是，样式对象写法key遵循小驼峰，例如font-size属性就要写成fontSize的形式 --> <style> .basic{ width: 400px; height: 100px; border-width: 2px; border-style: solid; } .normal{ border-color: black; } .happy{ border-color: rgb(247, 145, 20); background-color: antiquewhite; } .sad{ border-color: blue; background-color: aqua; } .big-font{ font-size: 50px; } .sleek-boder{ border-radius: 10px; } .blue-font{ color: blue; } </style> </head> <body> <div id="root"> <!-- 绑定class样式 字符串写法 适用于样式类名不确定，需要动态指定的情况 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br> <!-- 绑定class样式 数组写法 适用于样式个数、类名都不确定的情况 --> <div class="basic" :class="classArr">{{name}}</div><br><br> <!-- 绑定class样式 对象写法 适用于样式个数、类名都确定的情况，但需要动态决定这些样式用不用 --> <div class="basic" :class="classObject">{{name}}</div> <button @click="changeObject('1')">样式1切换</button> <button @click="changeObject('2')">样式2切换</button> <button @click="changeObject('3')">样式3切换</button> <br><br> <!-- 绑定style样式 对象写法 --> <div class="basic" :style="styleObject">{{name}}</div><br><br> <!-- 绑定style样式 数组写法 --> <div class="basic" :style="styleArr">{{name}}</div> </div> </body> <script> const vm = new Vue({ el: "#root", data: { name: "JMS世界", mood: "normal", classArr: ["big-font", "sleek-boder", "blue-font"], classObject: { //样式名为key，value为false不启用样式，为true启用样式 "big-font": false, "sleek-boder": false, "blue-font": false }, styleObject: { fontSize: "60px", color: "red", backgroundColor: "blue" }, styleArr: [ { fontSize: "60px", color: "red", }, { backgroundColor: "blue" } ] }, methods: { changeMood() { const moodArr = ["normal", "happy", "sad"] this.mood = moodArr[Math.floor(Math.random() * 3)] }, changeObject(index) { switch (index) { case '1': this.classObject["big-font"] = !this.classObject["big-font"] break case '2': this.classObject["sleek-boder"] = !this.classObject["sleek-boder"] break case '3': this.classObject["blue-font"] = !this.classObject["blue-font"] break } } }, }) </script> </html>
（本文仅作个人学习记录用，如有纰漏敬请指正）
