实例讲解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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
小程序云开发实战小结
Oct 25 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 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
PHP多个版本的分析解释
2011/07/21 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
python读取注册表中值的方法
2013/04/08 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
如何在python中执行另一个py文件
2020/04/30 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
回门宴父母答谢词
2014/01/26 职场文书
目标责任书范本
2014/04/16 职场文书
金融与证券专业求职信
2014/06/22 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书