1. :style 同时绑定对象与属性
:style="[{color: this.color}, this.layout == 'left'? this.item:this.item]"
2. 字符串拼接
:id="['ecahrt'+n+'-layout'+layout]"
:action="path+'executeSQLscript3'"
3. 绑定数值 与字符串数值
:class="{red:changeRed==n,['layout'+layout]:true}"
实践:
要想在html动态绑定值,data必须定义,否则当数据未从接口获取到时,即使设置display:none。页面也会造成毫无显示
order:{
listMailInfos :{
mailNo:' '
}
}
<li v-for="mailInfo in order.listMailInfos">
<a :href="['#mailDetails'+mailInfo.mailNo]" data-toggle="tab">在途详情 {{order.listMailInfos.length != 1 ?
'(' + mailInfo.mailNo + ')' : ''}}</a>
</li>
<div class="tab-pane fade" :id="['mailDetails'+mailInfo.mailNo]" v-for="mailInfo in order.listMailInfos" style="height: 320px; overflow-y: scroll;"></div>