实例讲解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写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
vue中v-model对select的绑定操作
Aug 31 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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 不错的学习资料
2009/02/06 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
javascript 写类方式之七
2009/07/05 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python 录制系统声音的示例
2020/12/21 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
Java程序员面试90题
2013/10/19 面试题
医学生自我评价
2014/01/27 职场文书
安全生产月活动总结
2014/05/04 职场文书
美术社团活动总结
2014/06/27 职场文书
公司合并协议书范本
2014/09/30 职场文书
身份证丢失证明
2015/06/19 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书