tyle绑定
注意:
凡是有 - 的 style 属性名都要变成驼峰式，比如font-size要变成fontSize。
除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff' 而不是 backgroundColor:#00a2ff
对象：
:style="{ color: activeColor, fontSize: fontSize + 'px' }" :style="{ color: ( index ==0 ? conFontColor : '#000' ) }
总结：对象写法多个样式用逗号隔开，表达式用括号括起来，属性值用引号
数组：
:style="[baseStyles, overridingStyles]" :style="[ {color:(index==0?conFontColor:'#000') }, {fontSize: '20px'} ]"
三目运算符:
style="{ color: (index==0 ? conFontColor : '#000' ) }" style="[ {color: (index ==0 ? conFontColor : '#000') }, {fontSize:'20px'} ]"
多重值:
style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }
此时，浏览器会根据运行支持情况进行选择。
绑定data对象：
:style="styleObject" data() { return{ styleObject: { color: 'red', fontSize: '13px' } } }
class绑定
对象：
:class="{'active':ifActive}" // 多个对象 :class="{'active':isActive, 'error':isError}"
类名 active 依赖于数据 isActive ,当其为 true 时候，div 会拥有类名 active；为false时则不再拥有 active 类名。
数组：
// 动态添加 :class="[ dataMap == 'worldmap' ? 'active_map' : '']" // 前后都可以加静态css :class="['home_map',dataMap == 'worldmap' ? 'active_map' : '' ,'normal_bg' ]"
三目运算符：
:class="flag ? 'pective' : 'pectiveD'" :class="stepData['phase'] >=1? 'finish': 'unfinish'"
绑定data对象：
:class="[atvieCls,errorCls]" data:{ atvieCls:'active', errorCls:'error' }
