1.用法
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ color:'color', //值color是定义的样式名 background:'background', test:{color:"#666", fontWeight:"bold"} }, }); } </script> <style type="text/css"> .color{color: #000} .background{background: #ccc} </style> </head> <body> <div id="box"> <!-- v-bind可省略 --> <!-- class --> <span v-bind:class="color">方式1</span> 等价 <span :class="color">方式1</span> <br> <span v-bind:class="[color,background]">方式2</span> <span v-bind:class="{color:true}">方式3</span> <!-- 样式 --> <span v-bind:style="test">方式3</span> </div> </body> </html>
注意：分清楚
:class 这个是class标签
:style 这个是样式标签