<div id="app">
<div class="p-5">
<h3>v-if 與 v-show</h3>
<p v-show="isFull">小明 飽了</p>
<p v-if="isFull">小明 飽了</p>
<button type="button" v-on:click="change('isFull')">狀態切換</button>
</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');