vue的属性绑定一般都用v-bind ,可以简写 : 。
例如:
<h1 v-bind:class=“hd” >test v-bind </h1>
<h1 :class=“hd”> test v-bind </h1>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SecondVue.js</title> <script src="vue.js"></script> </head> <body> <style> .red{ color:red; } </style> <div id="com"> <h1 v-bind:class="c" >c.com</h1> </div> <script> var app = new Vue({ el:'#com', data:{ c: 'red' } }); </script> </body> </html>
简写模式:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SecondVue.js</title> <script src="vue.js"></script> </head> <body> <style> .red{ color:red; } </style> <div id="com"> <h1 :class="c" >c.com</h1> </div> <script> var app = new Vue({ el:'#com', data:{ c: 'red' } }); </script> </body> </html>