vue.js操作元素属性
Posted Tommy_marc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js操作元素属性相关的知识，希望对你有一定的参考价值。
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:{ title:‘ask.mykeji.net‘, class_1:‘red‘ } }); </script> </body> </html>
以上是关于vue.js操作元素属性的主要内容，如果未能解决你的问题，请参考以下文章