vue 绑定style显示背景图片background-image的方法代码

Web前端开发 / 5059 次阅读

HTML标签使用style background-image属性添加背景图片，需要和vue双向绑定。

HTML代码

<div id="app">
	<div class="pic" v-bind:style="{backgroundImage:'url('+ bg + ')'}"></div>
</div>
这里需要注意的是：

  • 在vue中background-image要用驼峰写法，写成backgroundImage（和在jquery里的写法一致）；

  • 结束不要加分号。

Vue代码

var app = new Vue({
	el:'#app',
	data: {
		bg:'../images/bg.png'
	}
})