引言
操作元素的 class 列表和内联样式是数据绑定的一个常见需求
因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可
不过，字符串拼接麻烦且易错. 因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强. 表达式结果的类型除了字符串之外，还可以是对象或数组。动态的绑定与修改
class绑定
绑定对象
给 :class 一个对象，以动态地切换 class，语法类似键值对, 布尔值的value决定了String类型的Key是否显示，大致语法 {className:Boolean}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class绑定对象</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> <style> .nameHide { display: none; } </style> </head> <body> <div id="app"> <h1 :class="{'nameHide': nameActive}"> uiu </h1> </div> <script> let vm = new Vue({ el: "#app", data: { nameActive: false }, }) </script> </body> </html>
nameActive为false时
nameActive为true时
当然,有一点很重要,那就是可以多个class并存
<h1 :class="{'nameHide': nameActive,'redFont':true}"> uiu </h1>
绑定数组
可以把一个数组传给 v-bind:class，以应用一个 class 列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class绑定数组</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> <style> .blueBackground { background-color: blue; } .redFont { color: red; } </style> </head> <body> <div id="app"> <h1 :class="[nameFontClass.Background, nameFontClass.color]"> uiu </h1> </div> <script> let vm = new Vue({ el: "#app", data: { nameFontClass: { Background: "blueBackground", color: "redFont" } }, }) </script> </body> </html>
style绑定
在前端开发中，内联样式经常被使用到，Vue 中内联样式绑定语法灵活
CSS 属性名可以用驼峰式 (camelCase) 或 短横线分隔 (kebab-case，记得用单引号括起来) 来命名.
小建议：如果，你曾使用过 React 或者将要学习它，建议采用与 React 同样的 CSS 属性代码风格驼峰式 (camelCase).
绑定对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>style绑定对象</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <h1 :style="nameStyle"> uiu </h1> </div> <script> let vm = new Vue({ el: "#app", data: { nameStyle: { 'background-color': 'blue', 'color': 'red' } }, }) </script> </body> </html>
绑定数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>style绑定数组</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> </head> <body> <div id="app"> <h1 :style="[blueBackground,redFont]"> uiu </h1> </div> <script> let vm = new Vue({ el: "#app", data: { blueBackground: { 'background-color': 'blue' }, redFont: { 'color': 'red' } }, }) </script> </body> </html>
自动前缀
在开发中，由于浏览器内核不同，使用某些 CSS 属性需要带各浏览器的前缀，然而如果你在 Vue 中使用了 v-bind:style你完全不用去考虑，因为 Vue 在编译过程中，会自动给需要前缀的属性加前缀
引申知识： 通过CANIUSE查看询 CSS 属性兼容性，自动前缀包 Autoprefixer、postcss
