<div id="app">
<div class="p-5">
<h3>呈現多筆資料於畫面上 v-for</h3>
<h4>物件回圈</h4>
<p>菜單</p>
<ul>
<li v-for="(item,key) in productsObj" v-bind:key="item.name">
{{key+1}} - {{item.name}} / {{item.price}} 元
</li>
</ul>
</div>
</div>
const App = {
data() {
return {
name: '小明',
products: [
{
name: '蛋餅',
price: 30,
vegan: false
},
{
name: '飯糰',
price: 35,
vegan: false
},
{
name: '小籠包',
price: 60,
vegan: false
},
{
name: '蘿蔔糕',
price: 30,
vegan: true
},
],
productsObj: {
chineseOmelette: {
name: '蛋餅',
price: 30,
vegan: false
},
riceBall: {
name: '飯糰',
price: 35,
vegan: false
},
soupDumpling: {
name: '小籠包',
price: 60,
vegan: false
},
radishCake: {
name: '蘿蔔糕',
price: 30,
vegan: true
}
},
}
},
methods: {
reverseArray: function () {
this.products.reverse();
},
},
};
Vue.createApp(App)
.component('list-item', {
template: `
<li>
{{ item.name}} / {{ item.price }} 元
</li>
`,
props: ['item']
}).mount('#app');
