VUE添加背景图片以及背景图片自适应

• 背景图片地址不能直接写在标签里面，要用data绑定
• 背景图的地址要加require
• 背景图要设置height属性

<div :style="bgImg"> 
</div>
<script>
let that;
export default {   
  data () {
    return {
      bgImg:{ backgroundImage:"url(" + require("../../static/images/bg.jpg") + ")",
              height:'100vh',//这里一定要设置高度 否则背景图无法显示
              backgroundRepeat: "no-repeat"},
     }
  },  
 mounted(){
    that = this; 
   //开始背景图片自适应
   that.setImgSize();
   //屏幕尺寸改变的监听方法
   window.onresize = () => {
     that.setImgSize(); 
   }
 },
 methods:{
   setImgSize(){
     let height = document.body.clientHeight+"px"; //获取可见区域的高
     let width = document.body.clientWidth+"px";//获取可见区域的宽
     that.$set(that.bgImg,'backgroundSize',width+""+height);
   }
 }
} 
</script>

总结背景图的常用属性

height：100vh;

background-image:url();

background-repeat:no-repeat;

background-size:可见区域的宽 可见区域的高;