实例讲解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 相关文章推荐
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
微信小程序 开发之全局配置
May 05 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
JS函数式编程实现XDM一
Jun 16 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
一个目录遍历函数
2006/10/09 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
PHP文件操作方法汇总
2015/07/01 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
react redux入门示例
2018/04/19 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python实现教务管理系统
2018/03/12 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
pytorch中的inference使用实例
2020/02/20 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
消防安全责任书
2014/04/14 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
自我查摆剖析材料
2014/10/11 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技