vue v-if 不顯示和顯示錯位問題

轉載鏈接：https://blog.csdn.net/wang729506596/java/article/details/81014739

 

一、若v-if切換的是邏輯複雜的控件時，切換時不重新渲染極易出問題
需要給要重新渲染的控件添加一個key屬性，來唯一標識該控件，被key標識後會重新渲染。實例如下

<template v-if="type=== 'username'" key="1"> 
<label>用戶名</label> 
<input placeholder="輸入用戶名"> 
</template> 
<template v-else key="2"> 
<label>郵箱</label> 
<input placeholder="輸入郵箱"> 
</template>

 

二、v-if和v-else或v-else-if之間不能添加其他元素。   
以下是錯誤事例
<span v-if="type==1">錯誤示範</span>
<span>哈哈哈</span>
<p v-else>嘿嘿嘿</p>

以下是正確實例
<span v-if="type==1">正確示範</span>
<p v-else>嘿嘿嘿</p>
<span>哈哈哈</span>
v-if 爲同一類型組件(或同一模板的dom樹)來做顯示和隱藏時，最好在最外層添加key屬性來設定唯一標識，否則容易出問題
<template v-if="type=== 'username'">
<label>用戶名</label>
<input placeholder="輸入用戶名">
</template>
<template v-else>
<label>郵箱</label>
<input placeholder="輸入郵箱">
</template>
以上代碼切換時，僅僅切換placeholder，而不會重新渲染，因爲他用了相同的模板