官方文档：Class 与 Style 绑定 — Vue.js (vuejs.org)
字符串写法
字符串写法把data中的实例的值当作字符串填入class中来改变样式
这种方式是最灵活的
使用场景：样式的类型不确定
字符串绑定类样式：
<div :class="myclass">你好</div>
字符串使用的是vue实例data中的已有属性
实例
<!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>vue2</title> <style> .daxie{ font-size: 50px; } .yanse{ color: red; } </style> </head> <body> <div id="app"> <div :class="myclass1" > 你好,vue </div> <div :class="myclass2" > 你好,vue </div> <div :class="myclass3" > 你好,vue </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data() { return { myclass1:"daxie", myclass2:"yanse", myclass3:'daxie yanse' } }, }); </script> </html>
浏览器输出结果
对象写法
使用场景：样式个数、类名确定，通过Boolean动态展示与否
对象写在内联样式
对象方式绑定内联样式：
<div :class="{类样式:boolean类型的变量}">你好</div>
实例
<!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>vue2</title> <style> .daxie{ font-size: 50px; } .yanse{ color: red; } </style> </head> <body> <div id="app"> <div :class="{daxie:isDaxie,yanse:isYanse}" > 你好,对象 </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data() { return { isDaxie:true, isYanse:false } }, }); </script> </html>
浏览器输出结果
通过控制台修改后把颜色样式修改为真
