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


Posted in Javascript onSeptember 20, 2017

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控制台能更明显的看出来

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解Javascript作用域与变量提升
Dec 09 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
js检测用户输入密码强度
Oct 22 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
vue+element实现打印页面功能
May 20 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 #Javascript
PHP 实现一种多文件上传的方法
Sep 20 #Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 #Javascript
Vue.js项目模板搭建图文教程
Sep 20 #Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 #Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 #Javascript
You might like
实用函数3
2007/11/08 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
smarty表格换行实例
2014/12/15 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
让Python代码更快运行的5种方法
2015/06/21 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
交通法规咨询中心工作职责
2013/11/27 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
自主招生教师推荐信
2014/05/10 职场文书
统计专业自荐书
2014/07/06 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
nginx 配置指令之location使用详解
2022/05/25 Servers