1.三元表达式
<h3 :class="italic ? 'italic' : '' " >111</h3>
<h3 :style="italic ? 'color:red' : '' " >111</h3>
<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>
2.动态绑定多个
<h3 :class="[istalic ? 'italic' : '',isFalg ? 'active' : '']" >111</h3>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>
3.对象的语法绑定
<h3 :class="objClass" >111</h3>
<div :style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'"></div>
data(){
return{
objClass:{
itailc:true,
del:false
}
}
}