对象写在data中
对象写在data中绑定：
<div :class="data中创建的对象名">你好</div>
实例
data中的对象k值要和css中的类样式名一致，value值可以随便写但不能为空最好和类样式名一致
<!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="classObject"> 对象2-你好 </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data() { return { classObject:{ daxie:"lfghfhfdfg", yanse:"" } } }, }); </script> </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>vue2</title> <style> .daxie{ font-size: 50px; } .yanse{ color: red; } </style> </head> <body> <div id="app"> <div :class="[class1,class2]"> 数组1-你好 </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data() { return { class1:"daxie", class2:"yanse" } }, }); </script> </html>
浏览器输出结果
数组里加三元表达式
实例
大写能不能绑定上样式，要看isActive是真还是假
<div :class="[isActive?daxie:'',yanse]">数组2-你好</div>
写在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="classList"> 数组2-你好 </div> </div> </body> <script src="../js/vue2.7.js"></script> <script> var app = new Vue({ el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串 data() { return { classList:["daxie","yanse"] } }, }); </script> </html>
浏览器输出结果
总结
虽然有很多中绑定类样式的方法，但是每种类型各有千秋，要根据使用场景来去使用
