博客

 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
        }
    }
}