<!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">

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

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

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

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

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

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

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

    <input type="button" value="v-if" @click="flag=!flag">

    <p>=========================================</p>

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

    <input type="button" value="v-show" @click="flag1=!flag1">

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        flag: false,

        flag1: false,

      },

      methods: {}

    });

  </script>

</body>

</html>

Vue v-if和v-show的使用.区别的更多相关文章

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

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

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

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

  3. 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 ...

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

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

  5. [强连通分量] 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 ...

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

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

  7. poj 2762 Going from u to v or from v to u?

    题目描述:为了让他们的儿子变得更勇敢些,Jiajia和Wind将他们带到一个大洞穴中.洞穴中有n个房间,有一些单向的通道连接某些房间.每次,Wind选择两个房间x和y,要求他们的一个儿子从一个房间走到 ...

  8. POJ 2762 Going from u to v or from v to u? (强连通分量缩点+拓扑排序)

    题目链接:http://poj.org/problem?id=2762 题意是 有t组样例,n个点m条有向边,取任意两个点u和v,问u能不能到v 或者v能不能到u,要是可以就输出Yes,否则输出No. ...

  9. poj 2762 Going from u to v or from v to u?(强连通分量+缩点重构图+拓扑排序)

    http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit:  ...

  10. POJ 2762 Going from u to v or from v to u?（强联通 + TopSort）

    题目大意: 为了锻炼自己的儿子 Jiajia 和Wind 把自己的儿子带入到一个洞穴内,洞穴有n个房间,洞穴的道路是单向的. 每一次Wind 选择两个房间  x 和 y,   让他的儿子从一个房间走到 ...

随机推荐

  1. Oracle企业管理框架

    oracle管理服务器 是一个基于java的web构件,该构件是dba用来监视和控制oracle企业框架内各个受管理目标的实际界面 oracle储存库 已收集到并与受管理目标有关的配置和监视信息被存储 ...

  2. Linux 上GCC的静态编译和动态编译

    静态编译 常规编译示例: $gcc xxx.c yyy.c zzz.c -o rslt 注明: gcc编译器会对源文件min.c进行预处理, 编译, 以及链接, 最后生成可执行文件 $gcc -c x ...

  3. 洛谷 P1016 旅行家的预算 模拟+贪心

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P1016 旅行家的预算 题目描述 一个旅行家想驾驶汽车 ...

  4. PLAY2.6-SCALA(十二) 表单的处理

    一.表单处理流程如下 1.定义一个表单,在这里表单最多有22个字段 import play.api.data._ import play.api.data.Forms._ //要使用验证和约束 imp ...

  5. HDU - 4788 Hard Disk Drive （成都邀请赛H 水题）

    HDU - 4788 Hard Disk Drive Time Limit:1000MS   Memory Limit:32768KB   64bit IO Format:%I64d & %I ...

  6. Python　sorted

    sorted函数: iterable:是可迭代类型;cmp:用于比较的函数,比较什么由key决定,有默认值,迭代集合中的一项;key:用列表元素的某个属性和函数进行作为关键字,有默认值,迭代集合中的一 ...

  7. Oracle使用——impdp导入数据时数据表已经存在

    背景 在做数据迁移时,需要将不同地方的dmp文件整合到一个数据库中,在导入时,目标表已经存在,该如何把数据追加进入目标表中 方法介绍 当使用IMPDP完成数据库导入时,如遇到表已存在时,Oracle提 ...

  8. hdu1525 博弈

    /* n%m==0 n状态 n>=2*m 先手决定谁来面对当前的状态,并且可以知道状态,所以先手必胜. */ #include<stdio.h> int min(int x,int ...

  9. Idea创建maven项目 标签： idea 2016-12-28 21:51 605人阅读 评论(27) 收藏

    很久之前就听说了idea,界面也的确比eclipse好看,不过一直没有机会使用,这两天试用了一下,代码提示方面的确很好用,不过使用习惯跟eclipse还是有一些差距的,下面介绍一下如何用idea创建一 ...

  10. js错误处理Try-catch和throw

    1.try-catch语句   Try{ //可能会导致错误的代码 }catch(error){ //在错误发生时怎么处理 } 例如: try{ window.someNonexistentFunct ...