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.

1. v-if
   The v-if directive is used to dynamically render DOM elements based on given conditions. Its usage is simple, add the v-if directive on the element that needs to be conditionally rendered, and bind it to an expression that returns a Boolean value. If the expression evaluates to true, the element will be rendered, otherwise it will be removed.

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!.

2. v-show
   The v-show directive is also used to show or hide DOM elements based on given conditions. Its usage is similar to v-if, but the difference is that v-show only hides and displays elements by modifying the display attribute of the element, rather than inserting or deleting elements.

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!.

3. v-else
   The v-else directive is used to render a DOM element in an else block when the conditions of the v-if or v-show directive are not met. Note that v-else must immediately follow the v-if or v-show directive under the same parent element.

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.

4. v-else-if
   The v-else-if directive is used to determine another condition and render the corresponding DOM element when the conditions of the v-if or v-show directive are not met. . Also note that v-else-if must follow the v-if or v-show directive and be located under the same parent element.

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:

• Vue.js official documentation: https://vuejs.org/

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!