在vue中，「v-if」用於根據表達式的真假來操作DOM元素，可以切換元素的顯示和隱藏；表達式的值為true時，元素存在於dom樹中，當表達式為false時，元素會從dom樹中移除，語法為「v-if="表達式"」。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
v-if：根據表達式的真假，切換元素的顯示與隱藏（操作DOM元素）
（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一樣的時候就會保留內容，不一樣的時候就不會保留
【相關推薦：《vue.js教程》】
以上是vue中v-if的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
