Vue 中动态绑定背景图片（三种情况）

1.服务端返回图片链接

<divclass="bg-img":style="{ backgroundImage: `url(${imgUrl})` }" />
<div

2.引用本地的图片

<divclass="bg-img":style="{ backgroundImage: `url(${imgUrl})` }" />
<div

imgUrl: require('../assets/bg-img.png'),

一定要以require的方式引入，否则项目编译完渲染的时候路径有问题。

3.v-for 循环出来的 div 设置不同的背景

动态绑定类名

<divv-for="(item, index) in list":key="index"class="list-item"><divclass="item-title":class="bgImg[index]" />
</div>

定义类名映射数组

data() {return {bgImg: ['bg-img0', 'bg-img1', 'bg-img2'],};
},

在style中设置背景图

.bg-img0 {background: url(../assets/images/title0.png) center no-repeat;
}
.bg-img1 {background: url(../assets/images/title1.png) center no-repeat;
}
.bg-img2 {background: url(../assets/images/title2.png) center no-repeat;
}

Vue 中动态绑定背景图片（三种情况）相关推荐

Vue或uniapp 中动态绑定背景图片（三种情况）
Vue 中动态绑定背景图片(三种情况)_MrQiuGH的博客-CSDN博客_vue 动态背景图
vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
在vue中设置背景图片
在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
java基础：map遍历使用；java使用 Patten 和Matches 进行正则匹配；后端传到前端展示图片三种情况，并保存到手机；
文章目录前言一.map 遍历方法二.java正则学习三.后端传到前端图片三种情况 1. 图片流数据(InputStream) 转 base64,前端展示保存 a. 后端:输入流转base,直接 ...
在for循环中运行setTimeout的三种情况
在for循环中运行setTimeout是前端开发很常见的一种模式.最近被考了一道相关的题目觉得很有意思也很容易犯错,于是记录下来当做学习笔记. 下面先来看一段代码: for(var i=0;i< ...
vue中设置背景图片的方式
vue中设置背景图片直接设置背景图片动态设置背景图片直接设置背景图片 1.在data中声明背景图片相关配置 export default {data () {return {// 顶部导航背景图 ...
Vue中添加背景图片
往一个div中添加背景图片 bgImg:为图片地址希望能帮到你!!
vue中data定义数字类型_[乐意黎原创] Vue中data定义的三种方式和区别
在 Vue中,定义data时,经常有好几种写法,一不小心会混淆,这里彻底详述一下,以便记分清 . 一.在vue中,定义data可以有三种写法. 1. 第一种写法,data是一个对象. var app ...
vue中实现动画效果--三种方式
一.普通动画实现效果用一个按钮, 控制一个 div 的淡入和淡出步骤使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...

Vue 中动态绑定背景图片（三种情况）

1.服务端返回图片链接

2.引用本地的图片

3.v-for 循环出来的 div 设置不同的背景

Vue 中动态绑定背景图片（三种情况）相关推荐

最新文章

热门文章