Vue的條件渲染之用key管理可復用的元素

vue為了更高效地渲染元素，採用了復用元素機制，這樣做是為了高效以及一些其他的好處。例（官網）：

v-if

="logintype === 'username'
">
>
usernamelabel
>
placeholder
="enter your username"
>
template
>
v-else
>
>
emaillabel
>
placeholder
="enter your email address"
>
template
>

當然，我們都知道，這世間的萬事萬物有利就有弊，這種方式帶來了高效那肯定就帶來了坑。（當然了，那必是我踩過的，要不然也不會寫這個）

這個機制帶來的坑

其實很好理解，就拿上面**舉例，input復用代表著如果你輸入一段內容後，這時候你切換了登入方式，input中的內容是不會變的

相信看到這裡，你應該有點感覺了，這只是輸入框元素，那如果我自己寫的乙個元件如果被復用了且裡面的data沒有改變咋辦。當然了，vue會給你出解決辦法。

這時候如果你不想兩個相同的元素或元件被復用，你可以為它加上key屬性，這樣他就有了唯一標識。

v-if

="logintype === 'username'
">
>
usernamelabel
>
placeholder
="enter your username"
key="username-input"
>
template
>
v-else
>
>
emaillabel
>
placeholder
="enter your email address"
key="email-input"
>
template
>

vue條件渲染

判斷1 count 大於0，count的值是 5 判斷2 count的值是 判斷3 count的值是 data 當count值為0時，符合判斷3，呼叫判斷3的語句輸出 5 判斷2 count的值是 判斷3 count的值是 從結果看出，只呼叫了判斷1，說明它的執行 情況是按照 塊順序來去進行的，當前...

Vue 條件渲染

v if v else if v else v show 條件展示 簡單明瞭，直接上案例 案例 條件渲染 單路分支 h3 a p 條件渲染 雙路分支 h3 a p v else b p 條件渲染 多路分支 h3 美食 p 遊戲 p v else 睡覺 p 條件展示 h3 條件展示 p div bod...

Vue條件渲染

使用場景 判斷是否載入，如果為真，就載入，否則不載入 flag 如果flag為true則顯示,false不顯示 span div var vm newvue script type a a div v else if緊跟在v if或v else if之後 表示v if條件不成立時執行 else if...