实例讲解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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
详解使用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与javascript对多项选择的处理
2006/10/09 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php中请求url的五种方法总结
2017/07/13 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
js实现打字小游戏
2019/12/17 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
python实现查询IP地址所在地
2015/03/29 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python抽取指定url页面的title方法
2018/05/11 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python实现Dijkstra算法
2018/10/17 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
python中reload重载实例用法
2020/12/15 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
关于工资低的辞职信
2014/01/14 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
上海世博会口号
2014/06/19 职场文书
初婚未育证明样本
2014/10/24 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android