Practical guide to Vue conditional rendering: detailed explanation of the usage techniques of v-if, v-show, v-else, v-else-if

Vue Conditional Rendering Practical Guide: Detailed explanation of the usage skills of v-if, v-show, v-else, v-else-if

Vue.js is An open source JavaScript framework for building interactive front-end interfaces that provides flexible conditional rendering instructions to show or hide specific elements based on different conditions. In Vue, v-if, v-show, v-else, v-else-if are one of our commonly used conditional rendering instructions. This article details the use of these directives and provides corresponding code examples.

1. v-if and v-else

The v-if directive is used to render specific elements based on conditions. If the condition is true, the element will be rendered, if the condition is false, the element will not be rendered.

Example 1:

<script><br>export default {<br> data() {</script>

return {
  show: true
}

}
}

In the above example, Depending on the value of the show variable, if show is true, the text in the "h1" element will be displayed, and if show is false, the text in the "p" element will be displayed.

The v-else directive is used after v-if and can be used immediately within the same label to express the opposite condition to v-if.

Example 2:

<script><br>export default {<br> data() {</script>

return {
  show: true
}

}
}

In the above example, When the value of show is true, the text in the "h1" element is displayed; when the value of show is false, the text in the "h3" element is displayed.

2. v-show

The v-show command is similar to v-if and is also used to control the display and hiding of elements under specific conditions. The difference is that v-show uses the display attribute of CSS to switch the display and hiding of elements instead of directly deleting or adding elements.

Example 3:

<script><br>export default {<br> data() {</script>

return {
  show: true
}

}
}

In the above example, When the value of show is true, the text in the "h1" element is displayed; when the value of show is false, the text in the "p" element is displayed.

3. v-else-if

The v-else-if directive is similar to the v-else directive, but it allows us to set multiple consecutive conditions. It is very useful when using v-if directive and v-else directive.

Example 4:

<script><br>export default {<br> data() {</script>

return {
  score: 85
}

}
}

In the above example, Display different levels of text based on the value of the variable score. According to the value of score, first determine whether it is greater than or equal to 90. If so, display the text in the "h1" element. Otherwise, determine whether it is greater than or equal to 80. If so, display the text in the "h2" element, and so on.

To sum up, v-if, v-show, v-else, v-else-if are commonly used conditional rendering instructions in Vue.js. Choose which directive to use to achieve the desired effect based on the actual situation, and you can show or hide elements as needed. When writing code, rational use of these instructions can optimize the code structure and improve the readability and maintainability of the code. I hope this article will be helpful to you in Vue development.

(Note: The above example code is for reference only, please modify it according to the actual situation when using it)

The above is the detailed content of Practical guide to Vue conditional rendering: detailed explanation of the usage techniques of v-if, v-show, v-else, v-else-if. For more information, please follow other related articles on the PHP Chinese website!