vue---样式操作

样式操作|属性绑定
  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>