当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue的style绑定background-image的方式和其他变量数据的区别详解

vue的style绑定background-image的方式和其他变量数据的区别详解

2018年09月21日  | 移动技术网IT编程  | 我要评论

WWW.LNLOTTO.COM,常德不孕不育医院,无限挑战121103

问题：使用vue加载图片变量，为了图片的自适应，需设置为背景图居中排布

<tr v-for="(item,index) in dataobj">
 <td class="video-msg" v-bind:id="item.videoid">
  <div class="videoimg fl" v-bind:style="{backgroundimage:'url(' + item.videopic + ')'}">
  </div>
 </td>
 <td v-if="item.videoisdel == 3">审核中</td>
 <td>{{item.publishdate}}</td>
 <td>sss
  <button class="delete" @click='delconfirm(item.videoid)'>删除</button>
 </td>
</tr>

行内样式的写法：

v-bind:style="{backgroundimage:'url(' + item.videopic + ')', backgroundrepeat:'no-repeat', backgroundposition:'center center', backgroundsize: 'contain'}"

以上这篇vue的style绑定background-image的方式和其他变量数据的区别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网