在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 v-bind:class 里面绑定变量的值是 class , 指向对应的 类选择器 样式表, 而 v-bind:style 里面绑定的变量的值是一个以 css 属性名 为 键名, 以 css 属性值 为键值 的 键值对, 这种键值对需要以 对象 的形式传进去, 也可以使用 数组 将多个 样式表对象 传进去. 以下简单展示了两种使用方法实现同样效果.
:class
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Vue Test</title> <style> .style1 { width: 100px; height: 100px; background-color: tomato; } .style2 { margin: 0 auto; border-radius: 15px; } </style> </head> <body> <div id="app"> <div v-bind:class="{style1,style2}"></div> </div> <script> var vApp = new Vue({ el: "#app", data: { style1: "style1", style2: "style2" } }) </script> </body> </html>
:style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <title>Vue Test</title> <style> .style1 { width: 100px; height: 100px; background-color: tomato; } .style2 { margin: 0 auto; border-radius: 15px; } </style> </head> <body> <div id="app"> <div v-bind:style="[style1,style2]"></div> </div> <script> var vApp = new Vue({ el: "#app", data: { style1: { "width": "100px", "height": "100px", "background-color": "tomato" }, style2: { "margin": "0 auto", "border-radius": "15px" } } }) </script> </body> </html>
效果
