关于前端:Vue动态绑定背景图片及三元运算操作

两种状况:

1. 动静绑定后盾传来的图片

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

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

2. 咱们本人文件夹的图片(留神:这种形式肯定要用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(蕴含)