vue样式

发表于 | 分类于

vue样式绑定

  • class和style强化 数组和对象

class对象语法

1
<div v-bind:class="{active:isActive,error:isError}" class="box"></div>
1
2
3
4
5
6
7
var vm = new Vue({
  el:'app',
  data:{
    isActive:true,
    isError:true
  }
});
1
<div  class="box active error"></div>
  • 可以通过强大的计算属性 返回一个对象 绑定 class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var vm = new Vue({
  data:{
    isActive:true,
    isError:true  
  },
  computed:{
    classObj:function () {
      return {
        active:this.isActive,
        error:this.isError
      }
    }
  }
})

class数组语法

1
<div v-bind:class="[{active:isActive},errorClass]"></div>
1
2
3
4
5
6
var vm = new Vue({
  data:{
    activeClass:'active',
    errorClass:'error'
  }
})

style对象语法

1
<div v-bind:style="styleObj"></div>
1
2
3
4
5
6
data:{
  styleObj:{
    color:'red',
    fontSize:'16px'
  }
}

style数组语法

1
<div v-bind:style=[styleObj,baseObj]></div>