实例讲解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 相关文章推荐
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
js实现轮播图特效
May 28 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
Zerg建筑一览
2020/03/14 星际争霸
PHP4实际应用经验篇(6)
2006/10/09 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python使用Pycharm创建一个Django项目
2018/03/05 Python
python机器学习之贝叶斯分类
2018/03/26 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python开发入门——列表生成式
2020/09/03 Python
美国电视购物:QVC
2017/02/06 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
员工评语大全
2014/01/19 职场文书
投资协议书范本
2014/04/21 职场文书
社区党员公开承诺书
2014/08/30 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
预备党员个人总结
2015/02/14 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis
字节飞书面试promise.all实现示例
2022/06/16 Javascript