一、v-for
v-for 可以根據data裡的資料來渲染列表
先在Vue實例裡建一個data內容是個陣列
let vm = new Vue({
el: '#menu',
data: {
dishes: ["酸辣湯","排骨飯","雞腿飯"];
},
});
在HTML裡寫v-for
格式是[某物] in [列表]
此時列表就會渲染陣列裡的東西
<div id="menu">
<ul>
<li v-for="dish in dishes">{dish}</li>
</ul>
</div>
如果列表資料不是陣列而是物件的話，一樣可以渲染，只是在排列順序上不一定會按照屬性的順序
iThome鐵人賽
看影片追技術