Detailed explanation of the difference between v-if and v-show in vue

This article mainly introduces to you the difference between v-if and v-show in vue study notes. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

v-if vs v-show

v-if is a "real" conditional rendering, as it will ensure that during the switch, the conditional block is The event listeners and subcomponents are destroyed and recreated appropriately.

v-if is also lazy: if the condition is false on initial rendering, nothing is done - rendering of the conditional block won't begin until the condition first becomes true.

In contrast, v-show is much simpler - the element will always be rendered no matter what the initial conditions are, and it is simply toggled based on CSS.

In general, v-if has higher switching overhead, while v-show has higher initial rendering overhead. Therefore, v-show is better if you need to switch very frequently; v-if is better if conditions are unlikely to change at runtime.

<template>
  <p id="app">
    <p v-if="isIf">
      if
    </p>
    <p v-show="ifShow">
      show
    </p>
    <button @click="toggleShow">toggle</button>
  </p>
</template>

<script>
  export default {
    name: &#39;app&#39;,
    data() {
      return {
        isIf : true,
        ifShow : true,
        loginType : "username"
      }
    },
    methods: {
      toggleShow : function(){
        this.ifShow = this.ifShow ? false : true;
        this.isIf = this.isIf ? false : true;
      }
    }
  }
</script>

You can see it more clearly by looking at the chrom console

## From the comparison, we can see that v-if is directly deleted from the code, and v-show only switches the status through display. Therefore, it is recommended to use v-show if you switch frequently.

Related recommendations:

Detailed explanation of using the v-if directive in elements and templates

Vue.js uses v-show and v -Notes on if

Summary of common Vue.js instructions (v-if, v-for, etc.)

The above is the detailed content of Detailed explanation of the difference between v-if and v-show in vue. For more information, please follow other related articles on the PHP Chinese website!