黑马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. 微信小程序data-传参

    <view bindtap="change" data-index="{{index}}">哈哈</view> change(event ...

  2. css改变鼠标指针的形状

    <html> <body> <span style="cursor:auto"> <br /> <span style=&qu ...

  3. django 文件上传样例以及遇到的一些问题

    使用django上传文件 主流有两种方法 from表单以及ajax,为了自由度高一点,选择了ajax来实现文件的上传 前端部分代码如下: 主要关注 一 有一个文件上传(type='file')的按钮, ...

  4. 微信小程序开发（十一）获取手机的完整详细信息

    // succ.wxml <view style='position:absolute; top:30%; left:35%;font-size:36rpx'>{{name}}:签到成功. ...

  5. Linux rpm和yum软件管理

    rpm是管理程序的一个小工具,rpm常来用作查询 什么源码包:大多数都是tar.gz,bz.bz2结尾的包 zip结尾的包 压缩格式为 zip –r 命名.zip ./* 解压格式为 unzip 命名 ...

  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">详解

    X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的. 这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE> ...

  7. java——jdbc调用存储过程

    1,加载驱动: 2,获取连接 3,设置参数 4,执行: 5,释放连接 普通jdbc的执行过程: conn.prepareCall() 上面是一个调用存储过程的示例.

  8. Files的常用方法都有哪些？（未完成）

    Files的常用方法都有哪些?(未完成)

  9. bug-- java.lang.RuntimeException: Type “Klass*"

      使用jinfo查看jvm进程id为27523的信息   [java@xftest0 ~]$ jinfo 27523 Attaching to process ID 27523, please wa ...

  10. 05—动态sql

    1.创建表 CREATE TABLE tb_employee ( ID INT(11) PRIMARY KEY AUTO_INCREMENT, loginname VARCHAR(18), PASSW ...