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

Vue is a very popular JavaScript framework. It can not only be used to build single-page applications (SPA), but also can be used to create complex user interfaces. The v-if and v-else-if instructions in Vue are two important instructions for conditionally rendering views. This article will introduce how to use these two instructions to implement multiple conditional rendering.

1. Introduction to the v-if instruction

The v-if instruction is one of the most commonly used instructions in Vue. It is used to conditionally render elements based on the value of an expression. If the expression evaluates to true, the element is rendered, otherwise the element is not rendered.

For example, the following code demonstrates the use of the v-if instruction to determine whether a number is greater than 10. If the number is greater than 10, the label "Number greater than 10" will be displayed, otherwise the label will not be displayed:

<template>
  <div>
    <p v-if="num > 10">数字大于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 20
    }
  }
}
</script>

The data() method here returns an object containing a num attribute whose initial value is 20. Therefore, when rendering, the result of the expression "num > 10" is judged to be true, so a label will be rendered, and the text in the label is "Number greater than 10".

2. Introduction to the v-else-if directive

The v-else-if directive is also used for conditional rendering elements. It needs to be used as the "subsequent sibling element" of the v-if directive to determine whether to render the element based on the value of the expression. If the expression of the previous v-if directive evaluates to false, then the v-else-if directive will check whether its expression is true and render the element if it is true.

For example, the following code demonstrates how to use the v-if and v-else-if instructions to implement multiple conditional rendering:

<template>
  <div>
    <p v-if="num > 30">数字大于30</p>
    <p v-else-if="num > 20">数字大于20</p>
    <p v-else-if="num > 10">数字大于10</p>
    <p v-else>数字小于等于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 15
    }
  }
}
</script>

A number num is defined here, with an initial value of 15. Multiple v-if and v-else-if instructions are used to decide whether to display the label based on the value of num. First determine whether num is greater than 30. If so, display the label "Number greater than 30". Otherwise, determine whether num is greater than 20. If so, display the label "Number greater than 20", and so on.

In this example, since the value of num is 15, the first two conditions are not met, but the third condition is met, so the label "Number greater than 10" will be rendered.

3. Implementation of multiple conditional rendering

When multiple conditions need to be judged, we can use the v-if and v-else-if instructions in combination to achieve multiple conditional rendering. The following code demonstrates how to use the v-if and v-else-if directives to render different elements based on different conditions:

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 75
    }
  }
}
</script>

In this example, different text is displayed based on the score. . When the score is greater than or equal to 90 points, "Excellent" is displayed; when the score is greater than or equal to 80 points, "Good" is displayed; when the score is greater than or equal to 60 points, "Pass" is displayed; otherwise, "Failed" is displayed.

4. Summary

The v-if and v-else-if instructions are two very important instructions in Vue, which can be used to conditionally render elements. When used together, you can render different elements based on different conditions like in the example code. This approach allows us to organize programs in a clearer way and makes maintenance easier.

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