关于前端: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(蕴含)