vue学习笔记之v-if和v-show的区别_网络技术_宿州市腾雀网络科技有限公司

vue学习笔记之v-if和v-show的区别

发布时间 - 2026-01-11 03:19:58 点击率：次

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比较好

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# v # if和v # show区别 # show的区别 # vue # if # show # Vue.js常用指令汇总（v-if、v-for等） # 对vue中v-if的常见使用方法详解 # 详解为什么Vue中的v-if和v-for不建议一起用 # Vue.js使用v-show和v-if的注意事项 # VUE中V-IF条件判断改变元素的样式操作 # vue.js使用v-if实现显示与隐藏功能示例 # 对vue v-if v-else-if v-else 的简单使用详解 # 图文讲解vue的v-if使用方法 # vue中v-if 和v-permission 共同使用的坑及解决方案 # 较好 # 更高 # 不太 # 才会 # 得多 # 比较好 # 不做 # 可以看出 # 它会 # 相比之下 # 大家多多 # 过程中 # gt # template # lt # div # isIf # app # id # strong

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：拼多多仅退款会影响信用吗拼多多账号安全与信誉系统说明

下一篇：Java如何使用Jackson XML模块处理XML

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：拼多多仅退款会影响信用吗拼多多账号安全与信誉系统说明

下一篇：Java如何使用Jackson XML模块处理XML