注意:

• 凡是有-的style属性名都要变成驼峰式，列如font-size要变成fontSize
• 除了绑定值，其他的属性名的值要用引号括起来，列如backgroundColor: #00a2ff 而不是 backgroundColor:#00a2ff

【对象】

• html :style=”{ color: activeColor, fontSize: fontSize + px }”

• html :style=”{ color: ( index ==0 ? conFontColor : #000 ) }”

总结：对象写法多个样式用逗号隔开，表达式用括号括起来，属性值用引号

【数组】

• html :style=”[baseStyles, overridingStyles]”

• html :style=”[ {color:(index==0?conFontColor: #000 ) }, {fontSize: 20px } ]”

【三目运算符】

• html :style=”{ color: (index==0 ? conFontColor : #000 ) }”

• html :style=”[ {color: (index ==0 ? conFontColor : #000 ) }, {fontSize: 20px } ]”

【多重值】

*html :style=”{ display: [ -webkit-box , -ms-flexbox , flex ] }”
此时，浏览器会根据运行支持情况进行选择

【绑定data对象】

• html :style=”styleObject”

data() {
    return{
      styleObject: {
        color:  red ,
        fontSize:  13px 
      }  
    }
}

绑定Class

• 类名active依赖于数据isActive,当其为true时候，div会拥有类名active,为false时则没

:class="{ active :ifActive}"

• 绑定多个动态的

:class="{ active :isActive,  error :isError}"

• 动态class和静态的结合

 :class="[ dataMap ==  worldmap  ?  active_map  :     ]"

 :class="[ home_map ,dataMap ==  worldmap  ?  active_map  :    , normal_bg  ]"
// 前后都可以加静态css

• 三目运算符

:class="flag ?  pective  :  pectiveD "

:class="stepData[ phase ] >=1?  finish :  unfinish "

• 数组方法

:class="[atvieCls,errorCls]"

data:{
     atvieCls: active ,
     errorCls: error 
}