:class="index===tableIndex-1 ? 'trBac' : ''"
:style="{background:(bacFlag === 'search'?'#10A6B4':'')}"
对象写法:
html :style="{color:(index==0?conFontColor:'#000')}"
html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
数组写法:
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样式
写法:class=”xxx” xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
- style样式
:style=”{fontSize:xxx}”其中xxx是动态值。
:style=”[a,b]”其中a、b是样式对象。(样式对象:存在的css样式)
参考:https://blog.csdn.net/weixin_30736301/article/details/100093744