黑马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. input type=color 设置颜色

    在设置背景色的时候,使用html5 type=color 标签,但是初始值一直都是黑色的,背景如果没有设置的时候,应该是白色,比如文本图元,所以需要设置一个初始的颜色值, 注意: value不实用,怎 ...

  2. 7.移动端自动化测试-小知识 try...except...finally语句

    异常Error 我们在写代码的时候,经常会遇见程序抛出Error无法执行的情况 一般情况下,在Python无法正常处理程序时就会发生一个异常.异常是Python对象,表示一个错误.当Python脚本发 ...

  3. 13.SpringMVC核心技术-异常处理

    常用的SpringMVC异常处理方式主要是三种: 1.使用系统定义好的异常处理器   SimpleMappingExceptionResolver 2.使用自定义异常处理器 3.使用异常处理注解 Si ...

  4. Image Processing and Computer Vision_Review：Local Invariant Feature Detectors: A Survey——2007.11

    翻译 局部不变特征探测器:一项调查 摘要 -在本次调查中,我们概述了不变兴趣点探测器,它们如何随着时间的推移而发展,它们如何工作,以及它们各自的优点和缺点.我们首先定义理想局部特征检测器的属性.接下来 ...

  5. deep_learning_学习资料

    TensorFlow的55个经典案例:https://blog.csdn.net/xzy_thu/article/details/76220654 吴恩达机器学习: 1.序列学习:https://mo ...

  6. C# 一个数组集合，任意组合，不遗漏，不重复

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  7. Django_03_后台管理

    后台管理 站点分为内容发布和公共访问两部分 内容发布的部分由网站的管理员负责查看.添加.修改.删除数据,开发这些重复的功能是一件单调乏味.缺乏创造力的工作,为此,Django能够根据定义的模型类自动地 ...

  8. Python怎么检验数据的正态分布

    在对数据建模前,很多时候我们需要对数据做正态性检验,进而通过检验结果确定下一步的分析方案.下面介绍 Python 中常用的几种正态性检验方法: scipy.stats.kstest kstest 是一 ...

  9. 对称加密实现重要日志上报Openresty接口服务

    记录后端接收日志的流程: 由于记录的是广告数据,单次计费数据都会上报,全国内约10几万终端上报. 终端上报:Android电视端Apk上报 接收终端:Openresty(Nginx+lua)利用ngi ...

  10. Jenkins构建从github上克隆时，报Host key verification failed.

    首先在本地通过CMD执行git clone xxxxx时,可以成功的通过免密(SSH_KEY)克隆下来代码,但是通过Jenkins克隆时,就报如下信息: Cloning into 'GitHub'.. ...