• 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>
  • 相关阅读:
    2-7
    2-6
    2-5
    2-4
    2-3
    2-1
    2-2
    1-1
    5-7
    第六章例6-1
  • 原文地址:https://www.cnblogs.com/panjingshuang/p/11966547.html
Copyright © 2020-2023  润新知