[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vueionic中將資料與style綁定的方式":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":19,"minRead":20},150,"vueionic中將資料與style綁定的方式","[Vue]ionic中將資料與style綁定的方式","ionic中將資料與style綁定的方式 在Vue中如果需要資料丟到style中，例如動態讀取背景圖片，一種寫 […]","\u003Ch1>ionic中將資料與style綁定的方式\u003C\u002Fh1>\n\u003Cp>在Vue中如果需要資料丟到style中，例如動態讀取背景圖片，一種寫法是這樣。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><template>\n    <div v-for="(item) in data">\n        <div class="image-container" v-bind:style="{ backgroundImage: 'url(' + item.image + ')' }">\n    <\u002Fdiv>\n    <\u002Fdiv>\n<\u002Ftemplate>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>或是這樣\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><template>\n      <div class="image-container">\n        Image Container\n      <\u002Fdiv>\n<\u002Ftemplate>\n\n<script >\nconst props = {\n    image: "xxxxxxx",\n  }\n<\u002Fscript >\n<style>\n.image-container{\n    background: v-bind("props.image") no-repeat left center fixed;\n}\n<\u002Fstyle>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>第二種寫法在ionic中可以使用，但第一種則會判讀不到，需要改成這樣寫：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><template>\n    <div v-for="(item) in data">\n        <div class="image-container"  :style="`background-image: url(${image});`"><\u002Fdiv>\n    <\u002Fdiv>\n<\u002Ftemplate>\u003C\u002Fcode>\u003C\u002Fpre>\n","2022-11-08T13:00:29","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F09%2Fframework_ionic.jpeg",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"vue","\u002Fblog\u002Fvueionic中將資料與style綁定的方式",1]