vue三：vue基礎之v-if和v-show
阿新 • • 發佈：2021-01-20
v-show和v-if：
1.v-show：這個是一次性會把所有的都渲染出來，然後通過簡單的切換display值來修改是否需要被渲染。所以在需要頻繁切換的情況下推薦使用。v-show不能在template標籤上使用。
2. v-if：真正的條件渲染。如果條件更改了，那麼會適當的做標籤銷燬和重建以及事件的繫結等。在不需要頻繁切換的時候推薦使用。
v-if是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
v-if也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於CSS進行切換。
一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在執行時條件很少改變，則使用v-if較好。
一、在標籤會頻繁切換的情況，v-show更適合
二、v-if條件判斷：
在模板中，可以根據條件進行渲染。條件用到的是v-if、v-else-if以及v-else來組合實現的
有時候我們想要在一個條件中載入多個html元素，那麼我們可以通過template元素上實現
另外，在模板中，Vue會盡量重用已有的元素，而不是重新渲染，這樣可以變得更加高效。如果你允許使用者在不同的登入方式之間切換：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='vue.js'></script>
<title></title>
</head>
<body>
<div id="app">
<!-- <p v-if="weather == 'sun'">今天去公園玩！</p>-->
<!-- <p v-else-if="weather == 'rain'">今天去看電影！</p>-->
<!-- <p v-else>今天哪兒也不去！</p>-->
<!-- <template v-if="age<18">-->
<!-- <p>考了多少分？</p>-->
<!-- <p>排多少名？</p>-->
<!-- </template>-->
<!-- <template v-else-if="age>=18&&age<25">-->
<!-- <p>有女朋友嗎？</p>-->
<!-- <p>每個月工資多少？</p>-->
<!-- </template>-->
<!-- <template v-else=>-->
<!-- <p>有車嗎？</p>-->
<!-- <p>有房嗎？</p>-->
<!-- </template>-->
<template v-if="loginType=='username'">
<label>使用者名稱：</label>
<input type="text" name="username" placeholder="使用者名稱" key="username">
</template>
<template v-else-if="loginType=='email'">
<label>郵箱：</label>
<input type="text" name="email" placeholder="郵箱" key="email">
</template>
<button @click="changeLoginType">更換登入型別</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
weather: 'rain',
age: 20,
loginType: "username"
},
methods: {
changeLoginType() {
// 如果loginType==username則返回emall，否則返回username
this.loginType = this.loginType == 'username' ? "email" : "username"
}
}
});
</script>
</body>
</html>