Vue对class和style绑定的方式

1.对class

  对象:

    

1.<div :class="{active:isPlaying}"></div>
 <div :class="{active:isPlaying,demo:isPlaying}"></div>
active是否作用于该div元素上 由isPlaying数据来决定,为true时作用,false时不作用。
2.
<div :class="obj"></div>
data:{
  obj:{
    active:true,
    demo:false,
  }
}

  数组:

  

<div :class="[demo,active]"></div>
data:{
  demo:demo,
  active:"temp-active"  
}
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

2.绑定style

 数组和对象,基本上class相同 

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

猜你喜欢

转载自www.cnblogs.com/panjingshuang/p/11966547.html