vue学习笔记之v-if和v-show的区别


Posted in Javascript onSeptember 20, 2017

v-if vs v-show

v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

<template>
  <div id="app">
    <div v-if="isIf">
      if
    </div>
    <div v-show="ifShow">
      show
    </div>
    <button @click="toggleShow">toggle</button>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        isIf : true,
        ifShow : true,
        loginType : "username"
      }
    },
    methods: {
      toggleShow : function(){
        this.ifShow = this.ifShow ? false : true;
        this.isIf = this.isIf ? false : true;
      }
    }
  }
</script>

看chrom控制台能更明显的看出来

vue学习笔记之v-if和v-show的区别

vue学习笔记之v-if和v-show的区别

对比可以看出v-if直接从代码中删除了,v-show只是通过display来切换状态,因此建议频繁切换的话用v-show比较好

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
通过javascript设置css属性的代码
Dec 28 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 #Javascript
PHP 实现一种多文件上传的方法
Sep 20 #Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 #Javascript
Vue.js项目模板搭建图文教程
Sep 20 #Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 #Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 #Javascript
You might like
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
python多线程扫描端口示例
2014/01/16 Python
python执行get提交的方法
2015/04/29 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
深入理解Python装饰器
2016/07/27 Python
python requests 使用快速入门
2017/08/31 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
办理生育手续介绍信
2014/01/14 职场文书
干部行政关系介绍信
2014/01/17 职场文书
中国好声音广告词
2014/03/18 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
倡议书的格式写法
2015/04/28 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers