样式操作
样式操作|属性绑定
v-bind:class="数据|属性|变量|表达式"
:class/style = " 数据 " 数据类型:字符/对象 / 数组
:class="{类名:true,类名2:false}" 布尔值决定样式是否使用
:style="[{css属性名:值},{css属性名小驼峰:值}]"
<div id="app">
<h3>class</h3>
<a name="" id="" class="btn btn-primary" href="#" role="button">btn btn-primary</a>
<a name="" id="" :class="c1" href="#" role="button">c1</a>
<a name="" id="" :class=" 'btn btn-primary' " href="#" role="button">c11</a>
<a name="" id="" class="btn" :class=" 'btn-primary' " href="#" role="button">多个class</a>
<a name="" id="" :class=" {btn:true,'btn-primary':true} " href="#" role="button">对象</a>
<a name="" id="" :class=" [{btn:true},{'btn-primary':true}] " href="#" role="button">对象型数组</a>
<a name="" id="" :class=" ['btn','btn-primary'] " href="#" role="button">字符型数组</a>
<a name="" id="" :class=" arr " href="#" role="button">对象型数组</a>
<h3>style</h3>
<a name="" id="" class="btn btn-primary" style="background:red;color:blue" href="#" role="button">style</a>
<a name="" id="" class="btn btn-primary" :style="s1" href="#" role="button">s1</a>
<a name="" id="" class="btn btn-primary" :style=" 'background:red;color:blue' " href="#" role="button">string</a>
<a name="" id="" class="btn btn-primary" :style=" {'background':'red',color:'blue'} " href="#" role="button">对象</a>
<a name="" id="" class="btn btn-primary" :style=" [{background:'red'},{color:'blue'}] " href="#" role="button">对象型数组</a>
</div>
<script>
new Vue({
el:'#app',
data:{
c1:'btn btn-primary',
arr:[{btn:false},{'btn-primary':true}],
s1:'background:red;color:blue'
}
})
</script>