三 Class和Style绑定

class和style也是标签属性之一，通过字符串拼接，按照之前的bind用法也可以达到效果。

但是由于这两个属性使用频率高，拼接容易出错，vue对他们做了加强。

首先定义了如下style

.redC{
  color:red;
}
.fontB{
  font-size:20px;
}

绑定class的几种方式

1、属性真值放对象里

<div id="app">
<span :class="{'redC':'isRedC'}">{{msg}}</span>
</div>

var vm = new Vue({
  el:'#app',
  data:{
    msg:'123',
	isRedC:true}
});

就是一个属性的真值取自vue对象。

2、对象放data里

<div id="app">
<span :class="classObj">{{msg}}</span>
</div>
</body>
<script>
var vm = new Vue({
  el:'#app',
  data:{
    msg:'123',
	classObj:{'fontB':true}
	}
});
</script>

className和真值放在data里

3、用computed

<div id="app">
<span :class="classObj">{{msg}}</span>
</div>
</body>
<script>
var vm = new Vue({
  el:'#app',
  data:{
    msg:'123',
	isRedC:true
  },
  computed:{
    classObj:function(){
	  return {
	    'redC' : this.isRedC && 2==2
	  }
	}
  }
});
</script>

4、数组，需要的样式放在data里，用数组决定取那些data

<div id="app">
<span :class="[redC,fontB]">{{msg}}</span>
</div>
</body>
<script>
var vm = new Vue({
  el:'#app',
  data:{
    msg:'123',
	redC:'redC',
	fontB:'fontB'
  },
  computed:{
    classObj:function(){
	  return {
	    'redC' : this.isRedC && 2==2
	  }
	}
  }
});
</script>

5、style的绑定

<div v-bind:style="styleObject"></div>

data: { styleObject: { color: 'red', fontSize: '13px' } }

6、使用数组将多个样式绑定到一个对象上

<div v-bind:style="[baseStyles, overridingStyles]"></div>