vue中v-if的用法-Vue.js-PHP中文網

vue中v-if的用法

WBOY

發布： 2022-03-17 11:08:36

原創

52240 人瀏覽過

在vue中，「v-if」用於根據表達式的真假來操作DOM元素，可以切換元素的顯示和隱藏；表達式的值為true時，元素存在於dom樹中，當表達式為false時，元素會從dom樹中移除，語法為「v-if="表達式"」。

vue中v-if的用法

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue中v-if的用法

v-if：根據表達式的真假，切換元素的顯示與隱藏（操作DOM元素）

vue中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: &#39;#app&#39;,
        data: {
            isUser: true
        }
    })
</script>
</body>

登入後複製

點擊切換類型後可以切換顯示內容，這個時候會存在input標籤復用的問題（切換後輸入框中的內容沒有改變，這是虛擬DOM，盡可能地重複使用已經存在的元素，而不是新建一個元素，可以提升效能），可以增加key屬性，當key一樣的時候就會保留內容，不一樣的時候就不會保留

【相關推薦：《vue.js教程》】

以上是vue中v-if的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！