黑马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. sql server常用函数总结

    1. 日期函数相关 日期格式格式化函数:),UpdateTime,) --第3个参数为是要转换成的日期的格式,不同的数字代表不同的格式: 日期加减函数: ,UpdateTime) --第一个参数是刻度 ...

  2. Shell中比较判断

    一.shell判断数组中是否包含某个元素:ary=(1 2 3)a=2if [[ "${ary[@]}" =~ "$a" ]] ; then    echo & ...

  3. shell脚本读取文件值并进行比较

    #!/bin/bash keyValue=$(cat /dev/mcu/keyValue) //从文件中获取键值,注意:变量名和等号之间不能有空格 if [ $keyValue == 9 ] //注意 ...

  4. C# Winfrom 自定义控件添加图标

    Winfrom自定义控件添加自定义图标实现方式: 1.新建UserControl——略 2.寻找合适的图标文件——将文件和控件放置同一目录下(相同目录.自定义控件类名.图标文件名相同) 注:如果路径不 ...

  5. web开发：javascript之dom与bom

    一.节点认知 二.文档结构 三.文档节点操作 四.事件target 五.BOM操作 一.节点认知 - dom与dom属性 <!DOCTYPE html> <html> < ...

  6. python基础：数据类型阶段总结

    name =“   alex”1.移除name变量对应的值两边的空格,并输出处理结果      res=name.strip(’  ‘)      print(res) 2.判断neme变量对应的值是 ...

  7. 4. Scrapy框架

    Scrapy 框架 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页 ...

  8. django国际化的简单设置

    设置国际化的具体步骤: 一.国际化 1)效果:针对不同的国家的人可以配置不同的语言(一般是英文和中文,  English  Chinese) 2)目的:增加项目的用户量 3)难度:不难 比较费劲的就是 ...

  9. win10快速设置环境变量

    同时按WIN+R键,打开“运行”对话框,输入sysdm.cpl,按回车键打开“系统属性”. 在系统属性对话框中选择“高级”选项卡.

  10. python+Appium自动化：app滑动操作swipe

    swipe Appium使用滑动操作用到了swipe方法,定义如下: swipe(self, start_x, start_y, end_x, end_y, duration=None) 从一个点滑动 ...