实例讲解v-if和v-show的区别


Posted in Javascript onJanuary 31, 2019

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <div v-if="isIf">v-if</div>
    <div v-show="ifShow">v-show</div>
    <button @click="toggleShow()">点击按钮</button>
  </div>
</body>
<script src="vueDist/vue.min.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      isIf : true,
      ifShow : true,
    },
   methods:{
     toggleShow:function () {
       this.ifShow = this.ifShow ? false : true;
       this.isIf = this.isIf ? false : true;
     }
   }
  })
</script>
</html>

没点击前的图

实例讲解v-if和v-show的区别

点击后的图

实例讲解v-if和v-show的区别

显示来看v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;而v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JavaScript多种页面刷新方法小结
Apr 04 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 #Javascript
Angular PWA使用的Demo示例
Jan 31 #Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 #Javascript
微信小程序开发的基本流程步骤
Jan 31 #Javascript
JSON的parse()方法介绍
Jan 31 #Javascript
JSON.stringify()方法讲解
Jan 31 #Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 #Javascript
You might like
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
PHP文件读写操作相关函数总结
2014/11/18 PHP
Yii框架登录流程分析
2014/12/03 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
python2.7和NLTK安装详细教程
2018/09/19 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python实现程序重启和系统重启方式
2020/04/16 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
this关键字的含义
2015/04/08 面试题
十八大报告观后感
2014/01/28 职场文书
酒会邀请函
2015/01/31 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
民事调解书范文
2015/05/20 职场文书
法律意见书范本
2015/06/04 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers