Vue conditional rendering skills revealed: learn to use v-if, v-show, v-else, v-else-if to achieve flexible control

Vue conditional rendering skills revealed: learn to use v-if, v-show, v-else, v-else-if to achieve flexible control, you need specific code examples

In Vue, conditional rendering is a very important technique, which can control the display and hiding of components or elements based on a certain condition. Vue provides a variety of conditional rendering instructions, including v-if, v-show, v-else, v-else-if, etc. This article will delve into the usage techniques of these instructions and give specific code examples.

1. v-if directive
   The v-if directive can determine whether to render a certain component or element based on the value of the expression. If the value of the expression is true, the corresponding content is rendered; if the value of the expression is false, the corresponding content is not rendered. The following is an example:

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

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

In this example, we use the v-if directive to determine whether to display the title based on the value of showHeading. If the value of showHeading is true, then the title will be rendered; if the value of showHeading is false, then the paragraph with the hidden title will be rendered.

2. v-show directive
   The v-show directive has a similar function to the v-if directive. It can also control the display and hiding of components or elements based on the value of the expression. Unlike v-if, v-show does not add or remove DOM elements based on conditions, but controls the display and hiding of elements through CSS styles. The following is an example:

<template>
  <div>
    <h1 v-show="showHeading">显示标题</h1>
    <p v-show="!showHeading">隐藏标题</p>
  </div>
</template>

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

In this example, we use the v-show directive to control the display and hiding of the title based on the value of showHeading. Compared with v-if, the logic of v-show is simpler because it only controls the display and hiding of elements through CSS styles.

3. v-else directive
   The v-else directive must be used together with the v-if or v-show directive to express the opposite condition to the v-if or v-show directive. The following is an example:

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

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

In this example, if the value of showHeading is true, then the element with the title displayed will be rendered; if the value of showHeading is false, then the paragraph with the hidden title will be rendered. is rendered.

4. v-else-if directive
   The v-else-if directive must also be used together with the v-if or v-show directive to express the judgment of multiple conditions. It can be used to replace multiple v-else if statements. The following is an example:

<template>
  <div>
    <h1 v-if="rating >= 9">优秀</h1>
    <h2 v-else-if="rating >= 6">良好</h2>
    <h3 v-else-if="rating >= 3">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 8
    };
  }
};
</script>

In this example, based on the value of rating, we use the v-if and v-else-if instructions to determine the rating level and render different titles accordingly . If the rating value is greater than or equal to 9, an excellent title will be rendered; if the rating value is greater than or equal to 6, a good title will be rendered; if the rating value is greater than or equal to 3, a passing title will be rendered; if the rating value is greater than or equal to 3, a passing title will be rendered; If the value is less than 3, the unqualified title will be rendered.

Summary:
By learning and using conditional rendering instructions such as v-if, v-show, v-else and v-else-if, we can flexibly control the display of components and elements based on conditions and hidden. According to specific business needs, choosing appropriate instructions to implement conditional rendering can make our code more concise and readable. I hope the code examples provided in this article can help you better understand and use Vue's conditional rendering techniques.

The above is the detailed content of Vue conditional rendering skills revealed: learn to use v-if, v-show, v-else, v-else-if to achieve flexible control. For more information, please follow other related articles on the PHP Chinese website!