我有一些與 vuejs 一起使用的代碼，它們系結了一個域以及一個應該添加到域中的附加片段。當涉及到域和 item.url 時，我似乎無法弄清楚正確的連接
var vm = new Vue({
el: '#app',
data: {
items:[],
domain:"https://example.com/"
},
},
mounted: function () {
})
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id ="app">
<div v-for="item in items" class="gallery-cell" v-bind:style="{ backgroundImage: 'url(' domain item.url ')' }">{{ item.text}}</div>
</div>uj5u.com熱心網友回復：
你的 Vue 宣告一團糟。
修復它后，背景影像按原樣連接
new Vue({
el: '#app',
data: {
items: [
{ text: 'test1', url: 'ac0/cat-1364386.jpg' },
{ text: 'test2', url: '867/volcanic-mt-ngauruhoe-1378772.jpg' },
{ text: 'test3', url: '981/cow-1380252.jpg' }
],
domain: "https://images.freeimages.com/images/large-previews/"
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="item in items"
v-bind:style="{ backgroundImage: 'url(' domain item.url ')' }"
class="gallery-cell">
{{ item.text }}
</div>
</div>uj5u.com熱心網友回復：
我強烈建議使用模板字串以獲得更好的可讀性。并且建議使用一種方法而不是在模板中構建背景影像路徑。
new Vue({
el: '#app',
data: {
items: [
{ text: 'a', url: '10096730/pexels-photo-10096730.jpeg' },
{ text: 'b', url: '9772527/pexels-photo-9772527.jpeg' },
],
domain: 'https://images.pexels.com/photos/'
},
methods: {
getBackgroundImageStyle(url) {
return `backgroundImage: url(${this.domain}${url})`;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id ="app">
<div
class="gallery-cell"
v-for="item in items"
:style="getBackgroundImageStyle(item.url)">
{{ item.text }}
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/348555.html
標籤：javascript Vue.js 级联