3

新问题: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' }
    ]
  }
})
ohblue 128
2016-06-01 提问

查看全部 4 个回答

11

已采纳

我这边是正常的,你看看有没有设置div的宽高

新回答:

data () {
    return {
        img: require('你的json资源路径')
    }
}

:style="{backgroundImage: 'url(' + img + ')'}"

推广链接