黑马vue---20、v-if和v-show的使用和特点

一、总结

一句话总结：

v-if 的特点：每次都会重新删除或创建元素
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

二、内容在总结中

1、Vue指令之v-if和v-show

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

 

2、代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- <input type="button" value="toggle" @click="toggle"> -->

    <input type="button" value="toggle" @click="flag=!flag">

    <!-- v-if 的特点：每次都会重新删除或创建元素 -->

    <!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->

    <!-- v-if 有较高的切换性能消耗 -->

    <!-- v-show 有较高的初始渲染消耗 -->

    <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->

    <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->

    <h3 v-if="flag">这是用v-if控制的元素</h3>

    <h3 v-show="flag">这是用v-show控制的元素</h3>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        flag: false

      },

      methods: {

        /* toggle() {

          this.flag = !this.flag

        } */

      }

    });

  </script>

</body>

</html>
 

黑马vue---20、v-if和v-show的使用和特点的更多相关文章

  1. Oracle基本数据字典:v$database、v$instance、v$version、dba_objects

    v$database: 视图结构: SQL> desc v$database; Name                                      Null?    Type - ...

  2. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  3. Oracle体系结构之Oracle基本数据字典:v$database、v$instance、v$version、dba_objects

    v$database: 视图结构: SQL> desc v$database; Name                                      Null?    Type - ...

  4. [转]查看处于被锁状态的表：v$locked_object dba_objects v$session all_objects v$sqlarea v$lock

    oracle官网当一个用户发出select..for update的错作准备对返回的结果集进行修改时,如果结果集已经被另一个会话锁定,就是发生阻塞.需要等另一个会话结束之后才可继续执行.可以通过发出 ...

  5. 转：oracle几组重要的常见视图-v$latch，v$latch_children，v$lock，v$locked_object

    v$latch Oracle Rdbms应用了各种不同类型的锁定机制,latch即是其中的一种.Latch是用于保护SGA区中共享数据结构的一种串行化锁定机制.Latch的实现是与操作系统相关的, 尤 ...

  6. oracle 入门笔记--v$sql和v$sqlarea视图（转载）

    转载于作者:dbtan 原文链接:http://www.dbtan.com/2009/12/vsql-and-vsqlarea-view.html v$sql和v$sqlarea视图: 上文提到,v$ ...

  7. POJ2762 Going from u to v or from v to u(单连通 缩点)

    判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...

  8. Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序

         Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K       Description I ...

  9. [强连通分量] POJ 2762 Going from u to v or from v to u?

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17089 ...

  10. POJ2762 Going from u to v or from v to u?（判定单连通图：强连通分量+缩点+拓扑排序）

    这道题要判断一张有向图是否是单连通图,即图中是否任意两点u和v都存在u到v或v到u的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...

随机推荐

  1. Div实现水平垂直居中

    在实际应用中很多地方不仅要求实现元素的水平居中或者垂直居中效果,还可能会在水平方向和垂直方向上都要实现居中效果,下面就简单介绍几种元素水平垂直居中的方法(注:不同的方法会存在一些优缺点以及兼容性问题) ...

  2. JAVA对ArrayList排序

    ava如何对ArrayList中对象按照该对象某属性排序 增加排序功能,打印时:输出学生对象的时候,需要先按照年龄排序,如果年龄相同,则按照姓名排序,如果姓名也相同,则按照学号排序. Code hig ...

  3. 为什么有了uwsgi还要nginx这个“前端”服务器

    相信每一个使用nginx+uwsgi+django部署过的人,都感到非常复杂.到底为什么一个项目的发布要经过这么多层级,他们每一层有什么理由存在?这就带大家宏观地看待一下 首先nginx 是对外的服务 ...

  4. 第五章、Django之模型层----多表查询

    目录 第五章.Django之模型层----多表查询 一.一对多字段增删改查 1.增 2.查 3.改 4. 删除 二.多对多的增删改查 1. 增 2. 改 3. 删 三.ORM跨表查询 四.正反向的概念 ...

  5. YOLO---Darknet下的学习笔记 V190319

    YOLO---Darknet下的学习笔记 @WP 20190319 很久没有用YOlO算法了,今天又拿过来玩玩.折腾半天,才好运行通的,随手记一下: 一是,终端下的使用.二是,python接口的使用. ...

  6. Appium Desired Capabilities-iOS Only

    Appium Desired Capabilities-iOS Only These Capabilities are available only on the XCUITest Driver an ...

  7. PHP把数组按指定的个数分隔

    PHP把数组按指定的个数分隔 假设数组为array(‘1’,‘2’,‘3’,‘4’,‘5’,‘6’); 想把它分割成四个,那么结果为array(‘0’ => [‘1’,‘2’],‘1’ => ...

  8. ProjectEuler215 Crack-free Walls

    易知状态不会太多(\(3329\)个),直接搜一下,按照能不能连在后面建边,跑一遍dp即可 #include <bits/stdc++.h> using namespace std; st ...

  9. unity里framebuffer fetch相关问题

    https://docs.unity3d.com/Manual/SL-PlatformDifferences.html 开了framebuffer fetch 如果你再在里面sample 那张rt ( ...

  10. MySQL 下载与安装使用教程

    MySQL 官网地址:https://www.mysql.com/ 等待下载完成 双击运行 如果有需要 我们可以新增一个用户出来 点击 Add User,不需要的话 直接 点击 next 默认的MyS ...