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 相关文章推荐
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
jquery自定义表格样式
Nov 23 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
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的面向对象编程
2006/10/09 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python编码类型转换方法详解
2016/07/01 Python
python学生管理系统代码实现
2020/04/05 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python collections模块的使用方法
2020/10/09 Python
家长会演讲稿范文
2014/01/10 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
初中成绩单评语
2014/12/29 职场文书
服务员岗位职责
2015/02/03 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Navicat for MySQL的使用教程详解
2021/05/27 MySQL