<div id="app">
<div class="p-5">
<ul>
<template v-for="(item, key) in products" v-bind:key="item.name">
<li v-if="item.price>30">
{{ item.name}} / {{ item.price }} 元
</li>
</template>
</ul>
</div>
</div>
const App = {
data() {
return {
name: '小明',
isFull: true,
link: '小明',
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: {
change: function (key) {
this[key] = !this[key];
},
},
};
Vue.createApp(App).mount('#app');
