Vue动态绑定背景图片及三元运算操作

两种情况:

1. 动态绑定后台传来的图片

<div class="img" :style="{ backgroundImage: 'url('+ srcImgUrl +')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">

// srcImgUrl 在data(){ return{ srcImgUrl: ""}} 定义好的

1. 我们自己文件夹的图片(注意:这种方式一定要用require的方式)

<div class="img" :style="{ 'backgroundImage': 'url('+ require('../../assets/01.png') +')',no-repeat center center', 'backgroundSize':'100% 100%'}">

也可以在data中先存储,在引用

<div class="img" :style="{ backgroundImage: 'url('+ srcImgUrl +')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">

data() {
return{
// 这种方式也要用require
srcImgUrl : require('../../assets/img/001.png')
}
}

用三元运算符实现第1第2第3背景颜色不一样

<i :style="{'background-color':index ===0 ? 'red' :index ===1 ? 'orangered' : index === 2 ? 'orange' : 'rgb(196, 195, 195)'}">

• background-repeat 属性:背景图片 - 设置定位于不平铺
• background-repeat: no-repeat
• background-position: 设置背景图片的起始位置
• background-origin: background-Origin属性指定background-position属性应该是相对位置
• background-size: background-size 属性指定背景图片大小
• 语法: background-size: length(长度)|percentage(百分比)|cover(覆盖)|contain(包含)