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>