How to use v-if in vue-Vue.js-php.cn

How to use v-if in vue

WBOY

Release： 2022-03-17 11:08:36

Original

52435 people have browsed it

In vue, "v-if" is used to operate DOM elements according to the true or false expression, and can switch the display and hiding of elements; when the value of the expression is true, the element exists in the dom tree , when the expression is false, the element is removed from the DOM tree, and the syntax is "v-if="expression"".

How to use v-if in vue

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

Usage of v-if in vue

v-if: Switch the display and hiding of elements (operating DOM elements) based on the true or false expression of the expression

How to use v-if in vue

(1) v-if application

<div id="app">
 <h2 v-if="true">{{message}}</h2>
</div>

Copy after login

The data will only be displayed when it is true

(2) v- if and v-else

<div id="app">
 <h2 v-if="false">{{message}}</h2>
  <h1 v-else>hello</h1>
</div>

Copy after login

Execute if when v-if is true, otherwise, execute else

(3) Case: v-if and v-else Application

<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>

Copy after login

After clicking the switch type, you can switch the display content. At this time, there will be a problem of input tag reuse (the content in the input box does not change after switching. This is a virtual DOM, as much as possible Reusing existing elements instead of creating new ones can improve performance). You can add key attributes. When the keys are the same, the content will be retained. When they are different, the content will not be retained.

[Related recommendations : "vue.js tutorial"】

The above is the detailed content of How to use v-if in vue. For more information, please follow other related articles on the PHP Chinese website!