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 相关文章推荐
JSON 数据格式介绍
Jan 13 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
ES6箭头函数和扩展实例分析
May 23 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
一个目录遍历函数
2006/10/09 PHP
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python 错误和异常代码详解
2018/01/29 Python
Python实现抢购IPhone手机
2018/02/07 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
python实现微信自动回复功能
2018/04/11 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
金蝶的一道SQL笔试题
2012/12/18 面试题
学习党的群众路线剖析材料
2014/10/09 职场文书
大学生见习报告总结
2014/11/04 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
基层党建工作简报
2015/07/21 职场文书