直接上代码:
<!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>