直接上代碼:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js 使用數組和對象控制Class </title> <script src="vue.js"></script> <script src="node_modules/axios/dist/axios.js"></script> <script src="node_modules/lodash/lodash.js"></script> </head> <body> <style> .red{color:red;} .font{font-size: 200px;} </style> <div id="ask"><!--vue不能控制body和html的標簽--> <h1 :class="object">簡單</h1><!--也可以寫成:class="{red:true,font:true}"--> <hr> <h1 :class="['red','font']">記錄</h1><!--也可以寫成:class="[color,font_size]"--> </div> <script> var app = new Vue({ //實例化vue el:'#ask',//vue控制id為ask的元素, data:{ object:{red:true,font:false}, color:'red', font_size:'font' } }); </script> </body> </html>