Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

[Vue]ionic中將資料與style綁定的方式

內容目錄

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>