Home > Web Front-end > Vue.js > How to use v-if to determine whether to show or hide elements in Vue

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

PHPz
Release: 2023-06-11 08:06:13
Original
4210 people have browsed it

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>
Copy after login

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.

  1. Example

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

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

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.

  1. 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>
Copy after login

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.

  1. 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>
Copy after login

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

  1. 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template