vue 动态绑定背景图

1:backgroundImage && 三目运算符

<div
  :style="{backgroundImage: 'url(' + (detailData.status == 1 ? imgUrl : norImgUrl) + ')'}"
   class="quan-bac-img"
 >
data() {
  return {
    norImgUrl: require("../../assets/img/[email protected]"),
    imgUrl: require("../../assets/img/[email protected]")
  };
},

2:backgroundImage

<div
  :style="{backgroundImage: 'url(' + imgUrl + ')'}"
   class="quan-bac-img"
 >
data() {
  return {
    imgUrl:null
  };
},
created() {
 	if(this.detailData.status == 1){
 		this.imgUrl = "require('../../assets/img/[email protected]')"
 	}else{
		this.imgUrl = "require('../../assets/img/[email protected]')"
	}
},
原创文章 65 获赞 73 访问量 7741

猜你喜欢

转载自blog.csdn.net/qq_43592064/article/details/105657263