Home > Web Front-end > JS Tutorial > Detailed explanation of the difference between v-if and v-show in vue

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

小云云
Release: 2018-02-05 13:14:55
Original
1493 people have browsed it

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template