1、v-if和v-else
<h2 v-if="true">v-if</h2>
<h2 v-else>v-else</h2>
注：v-if為真 時，顯示v-if的內容，否則顯示v-else的內容
2、v-show
<h2 v-show="true">顯示我</h2>
注：v-if和v-show的區別
v-if和v-show的作用都把內容顯示和隱藏，不同的是，v-if在元素隱藏的時候，是把整個DOM元素刪除。v-show是在DOM元素上添加一個樣式，把內容隱藏起來。
****用法：當內容需要頻繁切換的時候，就用v-show，反之則用v-if
****切換登錄方式小案例（v-if \ v-else）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.js"></script> </head> <div id="app"> <!-- <h2 v-if="isShow">v-if</h2> <h2 v-else>v-else</h2> --> <span v-if="isShow"> <label for="user">密碼登錄</label> <input type="text" id="user" placeholder="請輸入你的QQ"> </span> <span v-else> <label for="email">郵箱登錄</label> <input type="text" id="email" placeholder="請輸入你的郵箱"> </span> <button @click="change()">切換方式</button> </div> <body> <script> let vm = new Vue({ el: '#app', data: () => ({ isShow: true }), methods: { change: function () { this.isShow = !this.isShow console.log(this.isShow) } } }) </script> </body> </html>
注：input的復用問題
當切換方式發生改變的時候，輸入框里面的內容不會清空 
這是因為VUE后台處理的原因。
1、因為郵箱登錄和密碼登錄不能同時出現
2、在內容渲染到頁面的時候，VUE會創建一個虛擬DOM
所以當郵箱登錄和密碼登錄相互切換的時候，因為組成他們的DOM元素是一樣的，為了提升性能，VUE后台作出處理，當DOM元素相同時，它會復用之前的那個DOM，所以導致切換登錄方式后，input里面的內容不會改變。其實他們用的就是同一個input.
解決方案
<label for="user">密碼登錄</label> <input type="text" id="user" placeholder="請輸入你的QQ" key="a">
在input里面加上一個key---唯一標識
當兩個input里面的key相同時，input就會復用，反之就不會復用