vue中设置背景图片的方式

vue中设置背景图片

• 直接设置背景图片
• 动态设置背景图片

直接设置背景图片

1、在data中声明背景图片相关配置

export default {
  data () {
    return {
      // 顶部导航背景图片配置
      background: {
      	// 背景图片地址
        backgroundImage: 'url(' + require('../../../static/img/person/') + ')',
        // 背景图片是否重复
        backgroundRepeat: 'no-repeat',
        // 背景图片大小
        backgroundSize: 'cover',
        // 背景颜色
        backgroundColor: '#000',
        // 背景图片位置
        backgroundPosition: 'center top'
      }
    }
  }
}

2、在vue中引用

 <div :style="background" class="bgBackground">
 </div>

3、设置背景图片的宽高

.bgBackground{
width:100%;
height:150;
}

动态设置背景图片

1、在data中声明背景图片相关配置和切换背景图片的条件

<script>
export default {
  data () {
    return {
      lessonActive: true, // 我的课程激活
      lessonDeactive: false, // 我的课程未被激活
      initLesson: { // 我的课程未被激活
        backgroundImage: 'url(' + require('../../../static/img/person/') + ')'
      },
      activeLesson: { // 我的课程激活
        backgroundImage: 'url(' + require('../../../static/img/person/') + ')'
      }
  }
}
</script>

2、在vue中引用
判断lessonActive是否为true,为true则显示激活条件下的图片，反之显示未激活下的图片

  <i :style="{backgroundImage:(lessonActive?:)}"></i>