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实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
openlayers实现地图弹窗
Sep 25 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
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
js读取本地文件的实例
2017/12/22 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
班主任工作年限证明
2014/01/12 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
安全施工责任书
2014/08/25 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL