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 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
详解webpack babel的配置
2018/01/09 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
分享6个隐藏的python功能
2017/12/07 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
工作报告范文
2019/06/20 职场文书
Python实现拼音转换
2021/06/07 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技