Vue 初心者筆記 #20 使用 is 動態切換元件
本篇文章會介紹使用 is 顯示元件與動態切換元件的方式。
使用 is “顯示” 元件
顯示元件有兩種方式:
- 第一種是將元件的
template
名稱直接寫成標籤
例如<primary-component>
- 另一種則是透過
is
把資料內容帶入
例如:帶入<div>
的標籤內
基本上,這兩種方式呈現於畫面上的結果是一樣的。
使用 is “動態切換” 元件
v-if 寫法
過去要達到 “切換” 的效果,我們會使用點擊事件 v-on:click
,搭配 v-if
條件判斷式來完成。
範例:
但是這個 v-if
的方法只適合用在切換的元件數量比較少的時候。
如果要切換的元件很多,像是製作頁籤的時候,
我們不就需要寫好幾行類似的程式碼了嗎?
這樣子效果就不是很好了。
is 寫法
所以我們要改良一下,像是改成使用 is
來做切換元件的動作。
要特別注意,因為這裡是做「動態」切換,所以要在
is
前面加上v-bind
,寫成:is
。
這邊我們使用 v-bind
分別綁定 data
內的變數資料 current
與 item
。
之所以會使用 v-bind
綁定 current
,是因為要讓 is
指向「元件名稱」,使得 Vue 在初始化時,就替換成該元件。
因此,v-bind:is
是將元件名稱指向 current
這個變數,也代表動態切換的控制權是交由 current
來決定。
那麼,current
又是由誰控制呢?
我們的 a
按鈕上都有綁定 v-on:click
事件,當使用者點擊按鈕時,current
的值就會做出切換。
例如:點擊「紅色元件」按鈕時,current
變數的值會從 primary-component
改為 danger-component
。
所以我們才能只綁定 current
變數,就達到切換按鈕的效果!
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。