<!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. IOS开发基础篇--CAShapeLayer的strokeStart和strokeEnd属性

    http://blog.csdn.net/yixiangboy/article/details/50662704 一.案例演示 最近有一个小需求,就是要做一个圆形进度条,大概样子如下: . 在不知道有 ...

  2. SQL注入绕过的技巧总结

    sql注入在很早很早以前是很常见的一个漏洞.后来随着安全水平的提高,sql注入已经很少能够看到了.但是就在今天,还有很多网站带着sql注入漏洞在运行.稍微有点安全意识的朋友就应该懂得要做一下sql注入 ...

  3. 深入浅出Cocoa 之动态创建类【转】

    在前文<深入浅出Cocoa之类与对象>一文中,我已经详细介绍了ObjC中的 Class 与 Object 的概念,今天我们来如何在运行 时动态创建类.下面这个函数就是应用前面讲到的Clas ...

  4. Android LruCache源码简介

    package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...

  5. C++之以分隔符的形式获取字符串

    void CConvert::Split(const std::string& src, const std::string& separator, std::vector<st ...

  6. Flask 第二篇

    Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返回字符串 2 ...

  7. SDUT_2502:火星计数法

    火星人的计数规则里只有a,b,c,d四个字母,计数规则从小到大是 a,b,c,d,aa,ab,ac,ad,ba,……. 给出来由a,b,c,d四种字母组成的火星数字,算出该数字是第几个(从1开始). ...

  8. 【New Feature】阿里云快照服务技术解析

    一.背景   目前上云已经成为行业发展趋势,越来越多的企业级客户将业务系统和数据库迁移到云上.而传统的备份一体机/备份软件方式,并不适合云上ECS.RDS等产品的备份与容灾服务.阿里云块存储服务提供云 ...

  9. 2016 Asia Jakarta Regional Contest L - Tale of a Happy Man UVALive - 7722

    UVALive - 7722 一定要自己做出来!

  10. C++ 求向量的交集、并集、差集

    #include<iostream> #include<stdio.h> #include<list> #include<algorithm> //se ...