iT邦幫忙

1

Vue 之溫習 - 使用 is 動態切換元件

在某些時候,我們會希望內容在特定的情況下才顯示,例如頁籤的效果,雖然可以透過 v-if 來判斷,並顯示元件
但元件一多的時候,反而不是一個理想的方法,所以才有 is 動態切換元件

先來初談 v-if 判斷元件的顯示:

<div id="app">
    <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'primary-component'}" href="#" @click.prevent="current = 'primary-component'">藍綠色元件</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'danger-component'}" href="#" @click.prevent="current = 'danger-component'">紅色元件</a>
        </li>
     </ul>
     <primary-component v-if="current === 'primary-component'"></primary-component>
     <danger-component v-if="current === 'danger-component'"></danger-component>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            current: 'primary-component'
        }
    });
</script>

上述是透過點擊 標籤來更動 data 內的 current 變數,再藉由 v-if 去判斷 current 變數符合條件時,元件就會顯示,當元件一多的時候,還要逐一判斷,顯得有點笨拙,這時候可以使用 is 動態切換元件

<div id="app">
    <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'primary-component'}" href="#" @click.prevent="current = 'primary-component'">藍綠色元件</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="{'active': current == 'danger-component'}" href="#" @click.prevent="current = 'danger-component'">紅色元件</a>
        </li>
     </ul>
     <div :is="current"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            current: 'primary-component'
        }
    });
</script>

使用 is 動態切換元件,current 變數我們需要放元件的名字,這樣我們就可以做到動態切換元件


尚未有邦友留言

立即登入留言