Vue动态样式绑定

1.v-bind指令属性

Vue指令已v-为前缀开始，数据绑定的指令为v-bind:属性名。前面所说的超链接数据绑定就是用的v-bind:href。

<div>
   <a v-bind:href="url">点击跳转</a>
</div>

var app = new Vue ({
  el:"#app",
  data:{
    url:"http://www.baidu.com"
  }
})

2.v-bind绑定class

<div id="app">
<div v-bind:class="{active:isactive:'text-danger':haserror}">内联对象方式</div>
<div v-bind:class="classobject">表达式计算方式</div>
<div v-bind:class="computedClass">计算属性计算方式</div>
</div>

<script>
  var app = new  Vue({
     el:"#app",
     data:{
       isactive:true,
       haserror:flase,
       classobject:{
         active:true,
         'text-danger':false
      }
    },
     computed:{
      computedClass:function(){
        return {
           active:this.isactive && !this.error,
           'text-danger':this.error && this.error.type === 'fatal',
           textDanger:true
        }
      }
    }
  })
</script>

3v-bind数组表达式绑定class属性

<div id="app">
<div v-bind:class="[activeclass,errorclass]">直接数组方式</div>
<div v-bind:class="[isactive?activeclass:'',errprclasss]">三元表达式</div>
<div v-bind:class="[{active:isactive},errorclass]">混合使用</div>
</div>

4v-bind对象语法绑定的行内样式

<div id="app">
   <div v-bind:style="{color:activecolor,fontsize:fontsize+'px'}">对象语法方式</div>
</div>

5数组语法绑定行内样式

<div id="app">
  <div v-bind:style="[basestyles,overridingstyles]">数组语法方式</div>
</div>