Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
在解決問題之道上不斷前行
在Vue中如果需要資料丟到style中,例如動態讀取背景圖片,一種寫法是這樣。
<template>
<div v-for="(item) in data">
<div class="image-container" v-bind:style="{ backgroundImage: 'url(' + item.image + ')' }">
</div>
</div>
</template>
或是這樣
<template>
<div class="image-container">
Image Container
</div>
</template>
<script >
const props = {
image: "xxxxxxx",
}
</script >
<style>
.image-container{
background: v-bind("props.image") no-repeat left center fixed;
}
</style>
第二種寫法在ionic中可以使用,但第一種則會判讀不到,需要改成這樣寫:
<template>
<div v-for="(item) in data">
<div class="image-container" :style="`background-image: url(${image});`"></div>
</div>
</template>