How to use v-if, v-else-if, v-else to achieve multiple conditional rendering in Vue

Vue is a popular JavaScript framework mainly used for building interactive web applications. In Vue, we can use v-if, v-else-if and v-else directives to implement multiple conditional rendering.

The v-if directive is used to render DOM elements based on conditions. The element will only be rendered when the condition is true. The v-else-if and v-else directives are used to use multiple conditions in the v-if directive.

Below we will introduce in detail how to use these instructions to achieve multiple conditional rendering.

Using the v-if directive

To use the v-if directive, we can add it to the DOM element that needs to be conditionally judged and bind it to an expression.

For example, we can create a Vue component similar to the following:

<template>
  <div>
    <p v-if="showMessage">显示消息</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true
    };
  }
};
</script>

In this component, we use the v-if directive to conditionally determine whether to display the message. If the value of the showMessage variable is true, then this element will be rendered into the DOM.

If the value of the showMessage variable is false, then this element will not be rendered on the page.

Use v-else-if and v-else directives

Sometimes we need to render DOM elements based on multiple conditions, then we can use v-else-if and v-else directives .

For example, we can create a component similar to the following:

<template>
  <div>
    <p v-if="size === 'small'">这是小尺寸</p>
    <p v-else-if="size === 'large'">这是大尺寸</p>
    <p v-else>这是默认尺寸</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'small'
    };
  }
};
</script>

In this example, we determine which element should be displayed based on the value of the variable size. If size is equal to "small", only the first p element will be rendered; if it is equal to "large", only the second p element will be rendered; otherwise, only the third p element will be rendered.

Summary

Vue provides convenient v-if, v-else-if and v-else instructions, allowing us to flexibly render DOM elements based on multiple conditions. We can use these directives to create powerful interactive applications and render them conditionally.

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