类与样式绑定
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。
不管是类class还是样式style，都有对象和数组的写法
完整案例： 02_template/08_style.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>class与style的绑定</title> <style> .baseclass { color: #0f0 } </style> </head> <body> <div id="app"> <div style="color: #f66; font-size: 30px">style的基本使用</div> <div class="baseclass">class的基本使用</div> <div :style="`color: #f66; font-size: ${fontSize}px`">style的基本使用</div> <div :style="'color: #f66; font-size:' + fontSize + 'px'">style的基本使用</div> <!-- style的对象的写法 --> <div :style="{ color: '#f66', 'font-size': fontSize + 'px'}">vue增强style-对象</div> <div :style="{ color: '#f66', fontSize: fontSize + 'px'}">vue增强style-对象</div> <!-- style的数组写法 --> <div :style="[sizeStyle, colorStyle]"> vue增强style - 数组</div> <!-- class的对象写法 --> <input type="checkbox" v-model="flag"> <div :class="{ baseclass: flag }">vue增强class - 对象</div> <!-- class的数组写法 --> <div :class="[ colorClass ]">vue增强class - 对象</div> </div> </body> <script src="../lib/vue.global.js"></script> <script> Vue.createApp({ data () { return { flag: false, fontSize: 50, sizeStyle: { fontSize: '70px' }, colorStyle: { color: '#00f' }, colorClass: { baseclass: true } } } }).mount('#app') </script> </html>
