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 相关文章推荐
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
js canvas实现擦除动画
Jul 16 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
PHP 文件扩展名 获取函数
2009/06/03 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php简单压缩css样式示例
2016/09/22 PHP
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
VUE重点问题总结
2018/03/19 Javascript
vuex 的简单使用
2018/03/22 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python中with及contextlib的用法详解
2017/06/08 Python
详解python Todo清单实战
2018/11/01 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
施工单位安全责任书
2014/07/24 职场文书
机关作风建设自查报告
2014/10/22 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
幼儿园辞职书
2015/02/26 职场文书
《雷雨》教学反思
2016/02/20 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL