How to implement conditional rendering in Vue

How to implement conditional rendering in Vue

Vue is a popular JavaScript framework, and its core function is to implement data-driven UI rendering. In Vue, we can easily control the rendered content through conditional judgment and realize the function of conditional rendering. This article will introduce how to use conditional rendering in Vue to control UI display under different situations, and provide specific code examples.

There are two main methods of conditional rendering in Vue: v-if instruction and v-show instruction. The usage of these two instructions is similar, but there are some subtle differences in the underlying implementation.

1. Use the v-if directive

The v-if directive can control whether an element is rendered based on whether the expression is true or false. When the expression is true, the element will be rendered into the DOM; when the expression is false, it will be removed from the DOM. We can achieve conditional rendering by using the v-if directive on HTML elements.

For example, we have a state variable isShow, which determines whether to display a button based on the value of isShow. You can use the v-if directive in the HTML template like this:

<button v-if="isShow">按钮</button>

Declare the isShow variable in the data option of the Vue instance and assign it an initial value. By modifying the value of isShow, we can show and hide the button.

var app = new Vue({
  el: '#app',
  data: {
    isShow: true  // 是否显示按钮
  }
});

When the value of isShow is true, the button will be rendered into the DOM; when the value of isShow is false, the button will be removed from the DOM.

2. Use the v-show directive

The v-show directive is similar to the v-if directive. Both can control the display and hiding of elements based on the true or false expression. The difference is that the v-show directive only controls the value of the element's CSS attribute display, rather than directly removing the element from the DOM. When the expression is true, the element is displayed; when the expression is false, the element is hidden. Using the v-show directive in an HTML template is also very simple:

<button v-show="isShow">按钮</button>

Similarly, declare the isShow variable in the data option of the Vue instance and assign it an initial value. By modifying the value of isShow, we can control the display and hiding of the button.

var app = new Vue({
  el: '#app',
  data: {
    isShow: true  // 是否显示按钮
  }
});

When the value of isShow is true, the button is displayed; when the value of isShow is false, the button is hidden. Compared with v-if, v-show has better performance and is suitable for situations where frequent switching of display states is required.

Summary:

The conditional rendering function in Vue can be implemented through the v-if directive and v-show directive. The v-if directive can dynamically render or remove elements based on whether an expression is true or false, while the v-show directive shows or hides elements by controlling their CSS properties. Choose the appropriate conditional rendering method according to actual needs to achieve better performance and user experience.

The above is the introduction and code examples of how to implement conditional rendering function in Vue. Please follow the steps in the article to try to use conditional rendering in your own Vue project. Hope it helps you!

The above is the detailed content of How to implement conditional rendering in Vue. For more information, please follow other related articles on the PHP Chinese website!