<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>对比v-if与v-show的使用</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

</head>

<body class="native">

    <div id="example">

                <!-- 频繁切换显示隐藏：display:none -->

        <p v-show="isHidden"> 默认单行(需要替换) </p>

        <template v-show="!isHidden">

            <h5>自定义多行显示：template替换内容</h5>

            <p>Paragraph 1</p>

            <p>Paragraph 2</p>

        </template>

                <!-- 三个判断以上：切换显示Dom节点 -->

                <template>

          <span v-if="isShow">成功</span>

          <span v-else-if="isHidden">失败</span>

          <span v-else-if="isHidden">已终止</span>

          <span v-else>运行中</span>

        </template>

    </div>

</body>

<script>

    var examleVM2 = new Vue({

        el: '#example',

        data: {

            isShow: true,

            isHidden: false,

        }

    })

</script>

</html>

vue权威指南笔记02——对比v-if与v-show的更多相关文章

  1. vue权威指南笔记01——样式的设置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Struts2权威指南笔记

    Struts2权威指南笔记 1.mvc特点包括: ① 多个视图可以对应一个模型 ② 模型返回的数据与显示逻辑分离 ③ 应用层被分隔为三层,降低了各层之间的耦合,提供了应用的可扩展性 ④ 控制层的概念也 ...

  3. 【vue 权威指南】 学习笔记 一

    内容简介 vue.js 是一个用来开发Web界面的前端库. 1.vue.js 是什么 vue.js 是一个构建数据驱动的web界面的库,vue.js 通过简单的API提供高效的数据绑定和灵活的组件系统 ...

  4. 【vue 权威指南】 学习笔记 二

    1.指令 1.1内部指令 基础指令:v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-b ...

  5. javascript权威指南笔记

    最近每天工作之余看下js的细节部分,时间不是很多,所以看的进度也不会太快,写个博客监督自己每天都看下. 以前不知道的细节或者以前知道但是没注意过的地方都会记录下来,所以适合有一定基础的,不适合零基础新 ...

  6. HTTP权威指南笔记-1.概述

    1.1 通讯 Web内容是存储在服务器上的,Web服务所使用的是HTTP协议,所以经常称为HTTP服务器.通讯过程为客户端(正常我们所使用的)发出请求,服务端根据客户端的HTTP请求响应相应数据,这就 ...

  7. css 权威指南笔记（一）

    零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...

  8. vue视频学习笔记02

    video 2 vue制作weibo交互 vue-> 1.0vue-resource ajax php服务器环境(node) this.$http.get()/post()/jsonp() th ...

  9. Android编程权威指南笔记3:Android Fragment讲解与Android Studio中的依赖关系，如何添加依赖关系

    Android Fragment 当我在学习时,了解了Fragment词汇 Fragment是一种控制器对象,我就把所了解的简单说一下.activity可以派fragment完成一些任务,就是管理用户 ...

随机推荐

  1. python（30）——【random模块】【if __name__ =='__main__'】【os模块】

    一.random模块(随机模块) 1.random 常用模块介绍 import random print(random.random()) #返回[0,1)之间的随机浮点数 print(random. ...

  2. 在Hadoop集群上的Hive配置

    1. 系统环境Oracle VM VirtualBoxUbuntu 16.04Hadoop 2.7.4Java 1.8.0_111 hadoop集群master:192.168.19.128slave ...

  3. 理解极大似然估计(MLE)

    极大似然估计学习时总会觉得有点不可思议,为什么可以这么做,什么情况才可以用极大似然估计.本文旨在通俗理解MLE(Maximum Likelihood Estimate). 一.极大似然估计的思想与举例 ...

  4. MySQL修改表、字段、库的字符集及字符集说明

    修改数据库字符集: ALTER DATABASE db_name DEFAULT CHARACTER SET character_name [COLLATE ...]; 把表默认的字符集和所有字符列( ...

  5. Java 8 新特性-菜鸟教程 (9) -Java8 Base64

    Java8 Base64 在Java 8中,Base64编码已经成为Java类库的标准. Java 8 内置了 Base64 编码的编码器和解码器. Base64工具类提供了一套静态方法获取下面三种B ...

  6. spring-boot-2.0.3启动源码篇二 - run方法(一)之SpringApplicationRunListener

    前言 Springboot启动源码系列还只写了一篇,已经过去一周,又到了每周一更的时间了(是不是很熟悉?),大家有没有很期待了?我会尽量保证启动源码系列每周一更,争取不让大家每周的期望落空.一周之中可 ...

  7. linux 双网卡桥接，实现网卡流量镜像与转发

    确认本地是否存在brctl,如果不存在请先安装: 1.确定你的镜像端口,比如eth1: 2.将实际数据通过的端口,比如eth0和镜像端口绑成一个bridge: brctl addbr br0 brct ...

  8. snmp自定义OID与文件下载----服务器端配置

    客户端使用命令工具:snmpwalk 服务端开启服务 snmp service.下载安装 net-snmp. 最近做了一些工作,记性较差感觉还是记下来比较好,毕竟网上能查到的有用的资料太少了. 自定义 ...

  9. Java设计模式学习记录-组合模式

    前言 今天要介绍的设计模式是组合模式,组合模式也是结构型设计模式的一种,它主要体现了整体与部分的关系,其典型的应用就是树形结构.组合是一组对象,其中的对象可能包含一个其他对象,也可能包含一组其他对象. ...

  10. [Cerc2012]Non-boring sequences

    Description 定义一个序列是不无聊的,当且仅当它的所有子区间都存在一个独一无二的数字,即每个子区间里至少存在一个数字只出现过一次.给定一个长度为\(N(N\leq2\times 10^5)\ ...