1、v-if
（1）v-if運用
<div id="app"> <h2 v-if="true">{{message}}</h2> </div>
只有在為true的時候才會顯示數據
（2）v-if與v-else
<div id="app"> <h2 v-if="false">{{message}}</h2> <h1 v-else>hello</h1> </div>
v-if為true的時候執行if，否則，執行else
（3）案例：v-if與v-else的應用
<body> <div id="app"> <span v-if="isUser"> <label for="username">用戶賬號</label> <input type="text" id="username" placeholder="用戶賬號"> </span> <span v-else> <label for="email">用戶郵箱</label> <input type="text" id="email" placeholder="用戶郵箱"> </span> <button @click="isUser=!isUser">切換類型</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { isUser: true } }) </script> </body>
點擊切換類型后可以切換顯示內容，這個時候會存在input標簽復用的問題（切換后輸入框中的內容沒有改變，這是虛擬DOM，盡可能地復用已經存在的元素，而不是新建一個元素，可以提升性能），可以增加key屬性，當key一樣的時候就會保留內容，不一樣的時候就不會保留
2、v-show
<body> <div id="app"> <h2 v-if="isShow" id="aaa">{{message}}</h2> <h2 v-show="isShow" id="bbb">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', isShow: true } }) </script> </body>
- 與v-if的區別
v-if:當條件為false時, 包含v-if指令的元素, 不會存在dom中
v-show: 當條件為false時, v-show只是給我們的元素添加一個行內樣式: display: none
當顯示與隱藏需要頻繁切換的時候使用v-show，切換次數較少的時候使用v-if