<div id="app">
<div class="p-5">
<h3>v-else-if</h3>
<nav class="nav nav-pills nav-fill">
<a class="nav-link" href="#" v-bind:class="{ 'active': link === '小明' }"
v-on:click="link = '小明'">小明</a>
<a class="nav-link" href="#" v-bind:class="{ 'active': link === '小美' }"
v-on:click="link = '小美'">小美</a>
<a class="nav-link" href="#" v-bind:class="{ 'active': link === '杰倫' }"
v-on:click="link = '杰倫'">杰倫</a>
</nav>
<div>
<div v-if="link === '小明'">小明吃早餐</div>
<div v-else-if="link === '小美'">小美去百貨公司</div>
<div v-else>杰倫去幫助人</div>
</div>
</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');
