【Vue】动态绑定背景

最新推荐文章于 2024-07-04 15:23:33 发布

小鱼小鱼啊

最新推荐文章于 2024-07-04 15:23:33 发布

阅读量229

点赞数

分类专栏：前端文章标签： vue javascript css vue.js

本文链接：https://blog.csdn.net/m0_46537958/article/details/107360205

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

动态修改background

template

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

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>