vue中v-if和v-show的区别是什么

本篇文章给大家分享的是有关vue中v-if和v-show的区别是什么，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

成都创新互联公司专注于桂平网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供桂平营销型网站建设，桂平网站制作、桂平网页设计、桂平网站官网定制、小程序设计服务，打造桂平网络公司原创品牌,更为您提供桂平网站排名全网营销落地服务。

v-if vs v-show

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

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

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

看chrom控制台能更明显的看出来

对比可以看出v-if直接从代码中删除了，v-show只是通过display来切换状态，因此建议频繁切换的话用v-show比较好

以上就是vue中v-if和v-show的区别是什么，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

网站题目：vue中v-if和v-show的区别是什么
网页链接：https://www.cdcxhl.com/article18/pdghdp.html

成都网站建设公司_创新互联，为您提供用户体验、网站排名、关键词优化、、手机网站建设、App开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联