【Vue】基于Vue的动态背景绑定

动态修改background

1. template

 <template>
    <!-- :style绑定data中的数据-->
 	<div :style="stylenoe">
	</div>
</template>

2. script

<script>
export default {
    
    
	data() {
    
    
		return {
    
    
		//这里给属性赋值
        stylenoe: {
    
    
          //backgroundImage -> background-image
          backgroundImage: "",
          //backgroundSize -> background-size
          backgroundSize: "contain",
          backgroundRepeat: "no-repeat"
        }
      }
	},
	mounted() {
    
    
	  // 这里直接修改data数据，即可动态修改
      this.stylenoe.backgroundImage = "url(" + require("../assets/" + bg) + ")"
    },
}
</script>