How to use v-if to determine whether to show or hide elements in Vue

In the Vue framework, v-if is a commonly used instruction, used to determine whether to display or hide elements based on the value of an expression. The following will introduce in detail how to use the v-if instruction.

1. Basic syntax

The basic syntax of the v-if instruction is as follows:

<div v-if="expression">内容</div>

Among them, expression is a JavaScript expression. If it is true, then Display the current element; if false, remove the current element from the DOM.

2. Example

The following is a simple example using the v-if directive:

<div id="app">
  <p v-if="isShow">这是要显示的内容</p>
</div>

We noticed that the isShow attribute is used to control the data Whether to display paragraph content, this value is a Boolean value. When isShow is true, the paragraph content will be displayed, otherwise it will not be displayed. Therefore, in Vue, we only need to modify the value of isShow to switch the display of content.

3. Using v-if and v-else

In addition to v-if, Vue also provides the v-else directive, which is used when the v-if expression is Display an element when false. To use v-else, you need to place it on the same DOM element as v-if, as shown below:

<div id="app">
  <p v-if="isShow">这是要显示的内容</p>
  <p v-else>这是要隐藏的内容</p>
</div>

In this example, if isShow is true, only the first paragraph content will be displayed; if If isShow is false, only the second paragraph will be displayed.

4. Using v-if and v-else-if

Vue also provides the v-else-if instruction, which is used between v-if and v-else Insert a condition in between. v-else-if also needs to be placed on the same DOM element as v-if, as shown below:

<div id="app">
  <p v-if="score >= 90">A级</p>
  <p v-else-if="score >= 80">B级</p>
  <p v-else-if="score >= 70">C级</p>
  <p v-else-if="score >= 60">D级</p>
  <p v-else>不及格</p>
</div>

In this example, different paragraph content will be displayed according to different grades.

5. Summary

This article introduces the use of the v-if directive in Vue to determine whether to display or hide elements based on the value of an expression. We can use v-if, v-else or v-else-if as needed to determine which element to display, thereby achieving richer page interaction effects.

The above is the detailed content of How to use v-if to determine whether to show or hide elements in Vue. For more information, please follow other related articles on the PHP Chinese website!