內容目錄
ionic中將資料與style綁定的方式
在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>
![[Vue]ionic中將資料與style綁定的方式](/api/proxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F09%2Fframework_ionic.jpeg)