vue在html中绑定值

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>