Advanced techniques for Vue conditional rendering: flexibly use v-if, v-show, v-else, v-else-if to create a dynamic interface

Advanced skills in Vue conditional rendering: flexibly use v-if, v-show, v-else, v-else-if to create a dynamic interface

In Vue , conditional rendering is a very important technique that can show or hide specific interface elements according to different conditions, improving user experience and interface flexibility. Vue provides a variety of conditional rendering instructions, including v-if, v-show, v-else and v-else-if. The following describes the use of these instructions and provides specific code examples.

The v-if directive is the most commonly used conditional rendering directive. It determines whether to render a specific element based on the true or false expression. If the condition is true, the corresponding element is rendered; if the condition is false, it is not rendered. The following is a simple sample code:

<template>
  <div>
    <p v-if="isActive">当前状态为激活</p>
    <p v-else>当前状态为未激活</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true // 根据该状态决定是否渲染对应的元素
    }
  }
}
</script>

In the above code, it is determined whether to render the corresponding element based on the value of isActive. If isActive is true, render the p element whose "current state is activated"; if isActive is false, render the p element whose "current state is inactive".

The v-show directive can also be used to show or hide elements based on conditions, but unlike v-if, v-show controls whether to display by setting the display attribute of the element. If the condition is true, the element's display attribute is set to "block" and the element is displayed; if the condition is false, the element's display attribute is set to "none" and the element is hidden. The following is a simple sample code:

<template>
  <div>
    <p v-show="isActive">当前状态为激活</p>
    <p v-show="!isActive">当前状态为未激活</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true // 根据该状态决定是否显示对应的元素
    }
  }
}
</script>

In the above code, the display attribute of the element is set according to the value of isActive, thereby controlling the display or hiding of the element. If isActive is true, the p element with "current status is activated" is displayed; if isActive is false, the p element with "current status is inactive" is displayed.

The v-else and v-else-if instructions are supplements to v-if and are used to select different rendering content when the conditions are not met. The v-else directive is used to express "other situations". It must immediately follow the v-if or v-else-if directive to represent all other situations where the previous condition is not met. The v-else-if instruction is used to express more conditions, and different rendering content can be selected based on multiple conditions. The following is a sample code using v-else and v-else-if:

<template>
  <div>
    <p v-if="score >= 90">成绩优秀</p>
    <p v-else-if="score >= 60">成绩合格</p>
    <p v-else>成绩不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 80 // 根据成绩决定显示不同的内容
    }
  }
}
</script>

In the above code, the student's score is judged based on the score value, and different p elements are displayed according to different scores. . If the score is greater than or equal to 90, the p element of "excellent performance" is displayed; if the score is greater than or equal to 60, the p element of "passed grade" is displayed; otherwise, the p element of "failed grade" is displayed.

By flexibly using conditional rendering instructions such as v-if, v-show, v-else and v-else-if, we can achieve richer and more dynamic interface effects. In actual development, appropriate conditional rendering instructions can be selected according to specific needs, thereby improving the readability and maintainability of the program. I hope the code examples and explanations in this article will be helpful to everyone in understanding and using Vue's conditional rendering techniques.

The above is the detailed content of Advanced techniques for Vue conditional rendering: flexibly use v-if, v-show, v-else, v-else-if to create a dynamic interface. For more information, please follow other related articles on the PHP Chinese website!