1. 問題描述
在校驗資料完整性的時候，如果用v-show那麼rules中加入了校驗,使用v-show=「false」 隱藏顯示，提交時頁面還是會做校驗,以至於不能將資料提交到後台，如果使用v-if=「false」可以解決此問題。
2. 二者區別
v-if和v-show具有類似的功能，不過v-if才是真正的條件渲染，它會根據表示式是適當地銷毀或重建元素及繫結的事件或子元件。若表示式初始值為false。則一開始元素/元件並不會渲染，只有當條件第一次變為真時才開始編譯。而 v-show 只是簡單的css屬性切換，無論條件真與否，都會被編譯。相比之下，v-if更適合條件不經常改變的場景，因為它切換開銷相對較大，而v-show適用於頻繁切換條件。
3. 演示測試
>
>
charset
="utf-8"
>
>
vue 測試例項title
>
src=
"">
script
>
head
>
>
>
type
="button"
@click
="toggle"
value
="顯示/隱藏"
>
v-if
="flag"
>
這是用v-if控制的元素h3
>
v-show
="flag"
>
這是用v-show控制的元素h3
>
div>
>
let vm=
newvue(,
methods:,}
})script
>
body
>
html
>
顯示狀態控制台渲染效果如下。
隱藏狀態效果圖。
隱藏狀態控制台渲染效果如下。
我們可以發現對於v-show指令，元素隱藏時，只是增加了display:none的樣式，而 v-if 指令則直接通過把該行刪除來實現了隱藏效果。
結論:
v-if和v-show的相同點：
都能夠實現指定內容的顯示和隱藏操作的效果。
v-if和v-show的不同點：
v-if在每次完成顯示和隱藏功能時，需要不斷的在dom樹上完成節點的建立和刪除操作，v-show則直接通過修改display樣式的屬性值來完成。
v-if和v-show的使用場景總結：
當乙個元素會被頻繁的顯示和影藏時，使用v-show。當元素在響應式網頁的操作過程中，根據不同使用者的需求，可能永遠不會被顯示或被隱藏，則選擇使用v-if。
vue指令之v if與v show
v if main.js data index.html 待檢視簡歷。你沒有許可權檢視資訊！v if中包裹多個標籤 hello world data v show v show 的用法與 v if 基本一致，只不過 v show 是改變元素的css 屬性display。當v show表示式的值為fa...
vue的v if和v show的區別
v if元素始終會被渲染並保留在dom中。v show只是簡單地切換元素的css屬性display。v if和v show的區別和使用時機 1.v if是 真正的條件渲染 因為他會確保在切換過程中，條件塊內的事件 和子元件適當被銷毀和重建。2.v if是惰性的 如果在出事的渲染條件為假的時候，則什麼...
vue中v if和v show的區別
v if 是根據條件來判斷是否要渲染該元素。而 v show是已經渲染了該元素用css來決定他顯不顯示。看起來似乎是v if比較好一點。但是作為元素間的切換的話。v if有較高的切換開銷。所以當如果你的頁面元素要經常切換的話用v show會比較好。當不需要經常切換的時候，這種情況就用v if比較好。...