<!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. spring boot -thymeleaf-遍历list和map

    遍历 list如下 th:each th:each 状态变量 var 遍历map如下(需要双层遍历) controller代码如下

  2. C语言最最最基础部分(a+b为例)

      此篇为C语言最基础的部分知识简单概括,对C语言有一定了解的同学建议绕道哦~另外,文底附有此文知识点详细了解的链接. 下面我们以“a+b”为例,分析这个程序的组成. #include<stdi ...

  3. 4 spring 创建对象的三种方式

    方式1. 通过构造方法创建     1.1 无参构造创建:默认情况.     1.2 有参构造创建:需要明确配置         1.2.1 需要在类中提供有参构造方法         1.2.2 在 ...

  4. 关于爬虫中常见的两个网页解析工具的分析 —— lxml / xpath 与 bs4 / BeautifulSoup

    http://www.cnblogs.com/binye-typing/p/6656595.html 读者可能会奇怪我标题怎么理成这个鬼样子,主要是单单写 lxml 与 bs4 这两个 py 模块名可 ...

  5. 全网最详细的IDEA、Eclipse和MyEclipse之间于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】（图文详解）

    不多说,直接上干货! IDEA [适合公司业务]全网最详细的IDEA里如何正确新建[普通或者Maven]的Java web项目并发布到Tomcat上运行成功[博主强烈推荐](类似eclipse里同一个 ...

  6. 大叔力量VIP介绍

    VIP介绍 框架技术点 平台 仓储 日志收集 缓存 消息队列 服务总线 事务 任务调度 授权 模块化 服务发现 .net ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ - .net core ✔ ✔ ✔ ✔ ✔ ...

  7. Spring @RequestAttribute

    @RequestAttribute注解用法 @RequestAttribute用在方法入参上,作用:从request中取对应的值,至于request中是怎么存在该属性的,方式多种多样,拦截器中预存.M ...

  8. php编程规范整理

    该规范对其他语言,部分是通用的标准....好吧,废话不多说啦,直入正题: 1.PHP 编程规范与编码习惯最主要的有以下几点: 1 文件说明 2 function 函数体说明 3 代码缩进 4 if省略 ...

  9. 数据库编程Case when

    数据库编程题 1. 姓名 日期 是否上班 张三 星期二 是 张三 星期三 是 李四 星期一 是 王五 星期二 是 张三 星期二 是 写出一条SQL语句输出下列结果 姓名 星期一 星期二 星期三 张三 ...

  10. 【Tomcat】压力测试和优化

    一.采用jmeter进行测试 为什么使用jmeter, 它免费开源, 不断发展, 功能逐渐强大. 可以做功能,负载, 性能测试.一套脚本可以同时用于功能和性能测试.Jmeter 有着众多的插件开发者, ...