vue动态操作div的class
看代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js操作元素属性</title> <script src="vue.js"></script> </head> <style> .red{ color:red; } .green{ color: green; } </style> <body> <div id="ask"><!--vue不能控制body和html的标签--> <h1 v-bind:class="class_1">{{title}}</h1> <h1 v-bind:class="'green'">{{title}}</h1> <!--在vue中v-bind这个因为多次使用所以可以使用简短语句--> <h1 :class="class_1">{{title}}</h1> <h1 :class="'green'">{{title}}</h1> </div> <script> var app = new Vue({ //实例化vue el:'#ask',//vue控制id为ask的元素, data:{ class_1:'red' } }); </script> </body> </html>