vue动态绑定css样式（vue中，动态绑定样式——动态绑定style写法 & 动态class写法）

vue中    
    
    
，动态绑定样式——动态绑定style写法 & 动态class写法

1
    
    
、动态绑定style写法

注意:

凡是有-的style属性名都要变成驼峰式 


     


     


，比如font-size要变成fontSize 除了绑定值

 




 




 ，其他的属性名的值要用引号括起来   

   

   
，比如backgroundColor:#00a2ff而不是 backgroundColor:#00a2ff 1.1     


     


     、对象 <div :style="{ color: activeColor, fontSize: fontSize + px }"></div> <div :style="{color:(index == 1 ? conFontColor:#000)}"></div> 1.2 




 




 



、数组 <div :style="[baseStyles, overridingStyles]"></div> <div :style="[{color:(index == 1 ? conFontColor:#000)},{fontSize:18px}]"></div> 1.3

   

   

、三元运算符 <div :style="{color:(index == 1 ? conFontColor:#000)}"></div> <div :style="[{color:(index == 1 ? conFontColor:#000)},{fontSize:18px}]"></div> <div :style="item.layerName === activeLayerName?font-weight:700 : font-weight:400"></div> <!-- 写法一 --> <div :style="[{float: id === 12 ? left:right}]"></div> <!-- 写法二 --> <div :style="float: nameList.length === 20 ? height:64px : height:32px "></div> <!-- 写法三 --> <div :style="{border:( nameId ===item.id ?2px solid #4C78FF: red)}"></div> 1.4     

     

    、绑定data对象 <div :style="styleObject"></div> <script> data() { return{ styleObject: { color: red, fontSize: 14px } } } </scrip> 2  




  




  


、动态class写法 2.1


  


  


、对象方法 <!-- isActive —— true/false --> <div :class="{ active: isActive }">{{name}}</div> 2.2     
     
   、判断是否绑定一个active <div :class="{active : isActive == -2}" >{{name}}</div> <div :class="{active : isActive == item.nameId}" >{{item.name}}</div> 2.3   




   




   

、绑定并判断多个 2.31



 



 



、第一种：用逗号隔开 <div :class="{ active: isActive, user: isUser }"></div> 2.32            、放在data里面 <div :class="classObject">{{name}}</div> <script> data() { return { classObject:{ active: true, user:false } } } </script> 2.33    




    




    
、使用computed属性 <div :class="classObject">{{name}}</div> <script> data() { return { isActive: true, isUser: false } }, computed: { classObject: function () { return { active: this.isActive, user:this.isUser } } } </script> 2.4














、数组方法 2.41           、单纯数组 <div :class="[isActive,isUser]">{{name}}</div> <script> data() { return{ isActive:active, isUser:user } } </script> 2.42     



     



     、数组与三元运算符结合判断选择需要的class 注意：三元运算符后面的“：    
    
    
”两边的class需要加上单引号  

     

     

，否则不能正确渲染

:class="[isActive?‘active’:’’]"

或者

:class="[isActive1?‘active’:’’]"

或者

:class="[isActiveindex?‘active’:’’]"

或者

:class="[isActive==index?‘active’:‘otherActiveClass’]" 2.43














、数组对象结合动态判断

//前面这个active在对象里面可以不加单引号


  




  




 ，后面这个sort要加单引号

:class="[{ active: isActive }, ‘sort’]"

或者

:class="[{ active: isActive1 }, ‘sort’]"

或者

:class="[{ active: isActiveindex }, ‘sort’]"