Question

我有一个基于item数组的vue组件。该数组包含组件中所需的所有相关信息。问题在于设置背景图片网址。我只能通过提供整个CSS语法而不只是图像网址来使其工作。如何使其仅适用于图片网址？

<div id="app">
  <book
  v-for="item in items"
  v-bind:item="item"
    ></book>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('book', {
  props: ['item'],
  template: '<div class="book" :class=" item.itemClass "><a :href="item.link" class="card"><div class="thumb" :style="item.url"></div><article><h1>{{  item.titlu }}</h1><span>{{ item.autor }}</span></article></a></div>'
})
var vueApp = new Vue({
    el: '#app',
    data: {
        items: [
            {
                itemClass: 'item-1',
                titlu: 'Title 1',
                autor: 'Author 1',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);',
            },
            {
                itemClass: 'item-2',
                titlu: 'Title 2',
                autor: 'Author 2',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg)',
            },
            {
                itemClass: 'item-2',
                titlu: 'Title 3',
                autor: 'Author 3',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);',
            },                      
        ]
    },
})
</script>

Answer 1

Inline styles binding需要一个对象或对象数组，而您正在传递一个字符串。

其形式应为：

:style="{ backgroundImage: 'url(...)' }"

Answer 2

将网址绑定到样式属性

Task<T>

这是一个有效的示例：this

Answer 3

好吧，在这里，当您直接使用CSS属性时，您需要使用内联样式绑定来应用背景图像。


<div v-bind:style="item.url"></div>

Vue.component('book', {
  props: ['item'],
  template: '<div class="book" :style="item.url" :class=" item.itemClass "><a :href="item.link" class="card"><div class="thumb" :style="item.url"></div><article><h1>{{  item.titlu }}</h1><span>{{ item.autor }}</span></article></a></div>'
})
var vueApp = new Vue({
    el: '#app',
    data: {
        items: [
            {
                itemClass: 'item-1',
                titlu: 'Title 1',
                autor: 'Author 1',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);',
            },
            {
                itemClass: 'item-2',
                titlu: 'Title 2',
                autor: 'Author 2',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg)',
            },
            {
                itemClass: 'item-2',
                titlu: 'Title 3',
                autor: 'Author 3',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);',
            },                      
        ]
    },
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <book
  v-for="item in items"
  v-bind:item="item"
    ></book>
</div>

希望这会有所帮助！

Answer 4

使用下面的代码。

<div id="app">
        <book v-for="item in items" v-bind:item="item"></book>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        Vue.component('book', {
            props: ['item'],
            template: `<div class="book" :class=" item.itemClass "><a :href="item.link" class="card"><div class="thumb" :style="{background: 'url('+item.url+')'}"></div><article><h1>{{  item.titlu }}</h1><span>{{ item.autor }}</span></article></a></div>`

        })
        var vueApp = new Vue({
            el: '#app',
            data: {
                items: [{
                        itemClass: 'item-1',
                        titlu: 'Title 1',
                        autor: 'Author 1',
                        link: 'www.google.com',
                        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg',
                    },
                    {
                        itemClass: 'item-2',
                        titlu: 'Title 2',
                        autor: 'Author 2',
                        link: 'www.google.com',
                        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg',
                    },
                    {
                        itemClass: 'item-2',
                        titlu: 'Title 3',
                        autor: 'Author 3',
                        link: 'www.google.com',
                        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg',
                    },
                ]
            },
        })
    </script>

如何使用Vue绑定设置背景图片网址

4 个答案: