## v-else-if 指令 **類型：** any **限制：** 前一兄弟元素必須有 v-if 或 v-else-if。 **用法：** 表示 v-if 的 “else if 塊”。可以鏈式調用。 >[success]代碼示例 ~~~ <ul id="list"> <li v-if="type === 'A'">A</li> <li v-else-if="type === 'B'">B</li> <li v-else-if="type === 'C'">C</li> <li v-else>Not A/B/C</li> </ul> <script type="text/javascript"> var app=new Vue({ el:'#list', data:{ type:'B' } }); </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/06v-else-if1.html ## 用 key 管理可復用的元素 Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。 這么做，除了使 Vue 變得非常快之外，還有一些有用的好處。 例如，如果你允許用戶在不同的登錄方式之間切換: ~~~ <div id="no-key-example" class="demo"> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template> <button v-on:click="toggleLoginType()">Toggle login type</button> </div> <script type="text/javascript"> new Vue({ el: '#no-key-example', data: { loginType: 'username' }, methods: { toggleLoginType: function () { return this.loginType = this.loginType === 'username' ? 'email' : 'username' } } }) </script> ~~~ 那么在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因為兩個模版使用了相同的元素，`<input>`不會被替換掉——僅僅是替換了它的的 placeholder。 >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/06v-else-if2.html  這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可： ~~~ <div id="no-key-example" class="demo"> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> <button v-on:click="toggleLoginType()">Toggle login type</button> </div> <script type="text/javascript"> new Vue({ el: '#no-key-example', data: { loginType: 'username' }, methods: { toggleLoginType: function () { return this.loginType = this.loginType === 'username' ? 'email' : 'username' } } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/06v-else-if3.html