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


Posted in Javascript onSeptember 03, 2018

问题:使用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的方式和其他变量数据的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
Javascript 命名空间模式
Nov 01 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 #Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 #Javascript
webpack4 处理CSS的方法示例
Sep 03 #Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 #Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 #Javascript
webpack4 处理SCSS的方法示例
Sep 03 #Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 #Javascript
You might like
php获取url参数方法总结
2014/11/13 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
Angular工具方法学习
2016/12/26 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Python文件操作类操作实例详解
2014/07/11 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
python3实现基于用户的协同过滤
2018/05/31 Python
使用Python处理BAM的方法
2018/09/28 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Django分页功能的实现代码详解
2019/07/29 Python
Python 如何在字符串中插入变量
2020/08/01 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
院药学专业个人求职信
2013/09/21 职场文书
信息工程学院毕业生推荐信
2013/11/05 职场文书
跳槽求职信范文
2014/05/26 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
国际贸易实训报告
2014/11/05 职场文书
行风评议整改报告
2014/11/06 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
运动会3000米加油稿
2015/07/21 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS