<!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. Maven 常用的远程中央仓库地址

    https://repo1.maven.org/maven2/ http://maven.jahia.org/maven2/ http://maven.aliyun.com/nexus/content ...

  2. 【xsy2479】counting 生成函数+多项式快速幂

    题目大意:在字符集大小为$m$的情况下,有多少种构造长度为$n$的字符串$s$的方案,使得$C(s)=k$.其中$C(s)$表示字符串$s$中出现次数最多的字符的出现次数. 对$998244353$取 ...

  3. __getattr__()

    定义了__getattr__(),当访问object不存在的属性时会调用该方法 不定义访问不存在的属性时会报 AttributeError eg: class Cat(object): def __i ...

  4. Nginx + Uswgi + Django的部署

    Nginx + Uswgi + Django的部署 待更新 https://code.ziqiangxuetang.com/django/django-static-files.html https: ...

  5. Linux驱动：内核等待队列

    在Linux中, 一个等待队列由一个"等待队列头"来管理,等待队列是双向链表结构. 应用场合:将等待同一资源的进程挂在同一个等待队列中. 数据结构 在include/linux/w ...

  6. salesforce零基础学习（九十）项目中的零碎知识点小总结（三）

    本次的内容其实大部分人都遇到过,也知道解决方案.但是因为没有牢记于心,导致问题再次出现还是花费了一点时间去排查了原因.在此记录下来,好记性不如烂笔头,争取下次发现类似的现象可以直接就知道原因.废话少说 ...

  7. Kafka项目实战－用户日志上报实时统计之分析与设计

    1.概述 本课程的视频教程地址:<Kafka实战项目之分析与设计>  本课程我通过一个用户实时上报日志案例作为基础,带着大家去分析Kafka这样一个项目的各个环节,从而对项目的整体设计做比 ...

  8. Linux 安装 JDK

    本篇博客用于记录一下在 Linux 系统下安装 Java 环境. 在大部分的 Linux 系统中都有安装 Open JDK,所以最好是先卸载 Open JDK 后在进行我们的 JDK 安装.Open ...

  9. 线段树（segment tree）

    线段树是一种二叉搜索树,它的每一个结点对应着一个区间[L, R],叶子结点对应的区间就是一个单位区间,即L == R.对于一个非叶子结点[L, R],它的左儿子所表示的区间是[L, (L +R)/2] ...

  10. MyBatis从入门到放弃三：一对一关联查询

    前言 简单来说在mybatis.xml中实现关联查询实在是有些麻烦,正是因为起框架本质是实现orm的半自动化. 那么mybatis实现一对一的关联查询则是使用association属性和resultM ...