javascript - vue的style绑定不支持background-image吗?
本文介绍了javascript - vue的style绑定不支持background-image吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
新问题:v-bind:style="backgroundImage:'url(todo.pic)'" 如果图片用的是json里的数据,会得到一个错误:
dev.js:4 [Vue warn]: Error when evaluating expression
"backgroundImage:'url(todo.pic)'>
html:
<div id="app">
<div v-for="todo in todos" v-bind:style="{backgroundImage:'url(todo.pic)'}">
{{ todo.text }}
</div>
</div>
js:
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript',pic:'a.png' },
{ text: 'Learn Vue.js', pic:'b.png' },
{ text: 'Build Something Awesome', pic:'c.png' }
]
}
})
解决方案
我这边是正常的,你看看有没有设置div的宽高
新回答:
data () {
return {
img: require('你的json资源路径')
}
}
:style="{backgroundImage: 'url(' + img + ')'}"
这篇关于javascript - vue的style绑定不支持background-image吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文