vue的:class和:style

:style總結：

寫inline style的方法跟class大同小異，一樣可以使用陣列及物件語法，但在給css屬性時要注意有些以-連結的詞，要改爲駝峯式寫法，或者是使用單引號括起來。

一. 對象語法

<div id="app">
　<!--單個屬性-->
　<div v-bind:style="{ color: activeColor}">color:{{activeColor}}</div>
　<!--駝峯寫法-->
　<div v-bind:style="{'text-align':textAlign,fontSize: fontSize + 'px'}">text-align:{{textAlign}},fontSize:{{fontSize}}px</div>
　<!--一個對象-->
　<div v-bind:style="styleObject">{{styleObject}}</div>
</div>

二. 數組語法

<div id="app">
　<!--整個數組-->
　<div v-bind:style="[baseStyles, overridingStyles]">{{[baseStyles, overridingStyles]}}</div>
　<!--數組+三元表達式-->
　<div v-bind:style="[{backgroundColor:isActive ? '#f00' : '#00f'},baseStyles]">如果isActive==true,背景紅色</div>
　<!--對象+數組-->
　<div v-bind:style="[{ baseStyles: Active }, overridingStyles]">{{[{ baseStyles: Active }, overridingStyles]}}</div>
</div>

三. :style動態改變背景

<div @click="istrue=!istrue" :style="{'height':'200px','width':'100px','background-size':'100%,100%','background-repeat':'no-repeat','background-image':`url(${istrue?'../../../static/1.png':'../../../static/2.png'})`}"> </div>

data:{
	istrue:false		
}

:class總結

<style>
　　.red{color:red;}
　　.blue{background-color:blue;}
</style>

方法一：單體寫法

<div :class="classA">Demo2</div>
data: {
  classA: 'class-a'  //當classA改變時將更新class
}

方法二：對象語法

//1.單或多對象寫法
	:class="{red:isred,blue:isbule}"
　 data:{
    	isred:true,
      isblue:false
   }

//2.json對象
 :class="json"
　data:{  //把屬性都放在一個對象裏面
　　 json:{
　　　	 red:false,
　　　  blue:true
　　 }
  }

方法三：數組語法

//1.整個數組
	:class="[reds,blues]">
　 data:{
  　　reds:"red",   //此處的red和blue指的是style中的red類和blue類
　　　blues:"blue"
　 }
　
//2.對象+數組
	:class="[classA, classB]"
　 data:{
  　　classA: 'class-a',
  		objectClass: {
    		classB: 'class-b',  // classB 的值爲class-b, 則將classB的值添加到class列表
   	 		classC: false,    // classC值爲false,將不添加classC
    		classD: true    // classD 值爲true，classC將被直接添加到class列表
			 }
   }
	 //渲染後: class="class-a class-b classD"

//3.數組+三元表達式
1>
 :class="[isActive ? activeClass : '', errorClass]"
 data: {
   isActive: true,
   activeClass: 'active',
   errorClass: 'text-danger'
 }

2>
 <el-button  :class="['uploadclass',status === 'view'? 'uploadClass-no':'uploadClass-hover']" :disabled="status === 'view'"> </el-button>

方法四：利用computed的計算屬性

	:class="classObject"
	 data: {
  		isActive: true,
  		error: null
		},
		computed: {
 			classObject () {
    			return {
      				active: this.isActive && !this.error,
      				text-danger': this.error && this.error.type === 'fatal'
   				 }
  		 }
		}

總結：

總體而言，:class和:style語法基本相似，但是需要注意的是css屬性時要注意有些以-連結的詞，要改爲駝峯式寫法，或者是使用單引號括起來。