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 变数我们需要放元件的名字，这样我们就可以做到动态切换元件