前段時間做頁面時需要動態設置背景圖片，每一種框架都會遇見類似的需求，特記錄下來，以免不時之需：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li span { width: 100px; height: 100px; border-radius: 999px; border: 1px solid red; background-position: center center; -webkit-background-size: cover; background-size: cover; display: inline-block; } </style> </head> <body> <ul id="app"> <li v-for= "item in a"> <span :style="{backgroundImage: 'url(' +item.b+ ')'}">111</span> </li> </ul> </body> <script src="js/vue.js"></script> <script> var a= new Vue({ el: "#app", data: { a: [{b: './img/gintama.jpg'}, {b: './img/glass.jpg'}, {b: './img/leader.jpg'}] } }) </script> </html>
核心代碼：
<li v-for= "item in a">
<span :style="{backgroundImage: 'url(' +item.b+ ')'}">111</span>
</li>
分析：
:style為字符串類型的對象，在對象內，屬性名簡寫，屬性值為字符串類型，即必須帶上‘，
而根據vue的語法，使用vue值的時候不需要像angular一樣用{{}}包裹