vue通过style或者class改变样式的实例代码

<div :style=\"{ \'min-height\': size + \'px\' }\"></div> 
<div :style=\"[{ \'min-height\': size + \'px\' },{color:\'red\'}]\"></div> 
<div :style=\"{ \'opacity\': value ? 0.5 : 1 }\"></div> 

​<div class=\"static\"
   v-bind:class=\"{ active: isActive, \'text-danger\': hasError }\">
</div>

< >
data: {
 isActive: true,
 hasError: false
}
</ >

<style>
.active{
  ...
}
.text-danger{
  ...
}
</style>

export default{
  data(){
   return{
    duixiang :{
     active : true
    }
   }
  } 
}

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

<div :class = \"[ n , i]\"> </div>
export default{
 data(){
  return{
   n : \' active \',
   i : \' text-danger \',
  }
  }
}

<div :style = \" { color : activeColor , fontSize : fontSize + \'px\' } \"></div>
//然后在data里面写明，冒号后边的这个变量的实际内容，如果是单位，像px这种就直接用字符串引着就行了
data: {
 activeColor: \'red\',
 fontSize: 30
}　　

<div v-bind:style=\"style \"></div>
//然后在data声明这个对象变量是指代一个怎样具体的对象
data: {
 style : {
  color: \'red\',
  fontSize: \'13px\'
 }
}