Home > Article > Web Front-end > Advanced application of Vue: Practical use of v-if, v-show, v-else, v-else-if to achieve complex conditional rendering
Vue Advanced Application: Practical v-if, v-show, v-else, v-else-if to achieve complex conditional rendering
Introduction:
Vue.js is a popular JavaScript framework for building user interfaces. It provides a wealth of instructions, including v-if, v-show, v-else, v-else-if, for rendering and displaying DOM elements according to different conditions. In this article, we'll explore how to leverage these directives to implement complex conditional rendering, illustrated with concrete code examples.
Sample code:
<template> <div> <div v-if="showMessage">Hello World!</div> <button @click="toggleMessage">Toggle Message</button> </div> </template> <script> export default { data() { return { showMessage: true }; }, methods: { toggleMessage() { this.showMessage = !this.showMessage; } } }; </script>
In the above example, we switch the value of showMessage when the button is clicked, thereby controlling the display and hiding of Hello World!.
Sample code:
<template> <div> <div v-show="showMessage">Hello World!</div> <button @click="toggleMessage">Toggle Message</button> </div> </template> <script> export default { data() { return { showMessage: true }; }, methods: { toggleMessage() { this.showMessage = !this.showMessage; } } }; </script>
Similarly, by clicking the button to switch the value of showMessage, we can control the display and hiding of Hello World!.
Sample code:
<template> <div> <div v-if="showMessage">Hello World!</div> <div v-else>Goodbye World!</div> <button @click="toggleMessage">Toggle Message</button> </div> </template> <script> export default { data() { return { showMessage: true }; }, methods: { toggleMessage() { this.showMessage = !this.showMessage; } } }; </script>
Based on the above example, when the value of showMessage is false, "Goodbye World!" will be rendered.
Sample code:
<template> <div> <div v-if="messageType === 'success'">Success!</div> <div v-else-if="messageType === 'warning'">Warning!</div> <div v-else-if="messageType === 'error'">Error!</div> <div v-else>Info!</div> <button @click="changeMessageType">Change Message Type</button> </div> </template> <script> export default { data() { return { messageType: 'success' }; }, methods: { changeMessageType() { if (this.messageType === 'success') { this.messageType = 'warning'; } else if (this.messageType === 'warning') { this.messageType = 'error'; } else if (this.messageType === 'error') { this.messageType = ''; } else { this.messageType = 'success'; } } } }; </script>
In the above example, by clicking the button, we can loop through different types of messages.
Summary:
In this article, we introduce the use of v-if, v-show, v-else, and v-else-if instructions in Vue through specific code examples. These instructions provide us with a flexible way to control DOM elements, allowing us to dynamically render the page according to different conditions. Mastering the usage of these instructions will help us better build complex user interfaces.
Reference materials:
The above is the detailed content of Advanced application of Vue: Practical use of v-if, v-show, v-else, v-else-if to achieve complex conditional rendering. For more information, please follow other related articles on the PHP Chinese website!