<!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. 批量插入bulkcopy

     public static void InsertBatch<T>(IDbConnection conn, IEnumerable<T> entityList, string ...

  2. [EXP]Microsoft Windows CONTACT - Remote Code Execution

    [+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org [+] Source: http://hyp3 ...

  3. [源码]Delphi源码免杀之函数动态调用 实现免杀的下载者

    [免杀]Delphi源码免杀之函数动态调用 实现免杀的下载者 2013-12-30 23:44:21         来源:K8拉登哥哥's Blog   自己编译这份代码看看 过N多杀软  没什么技 ...

  4. web自动化测试---web页面元素的定位

    selenium提供了很多用于定位元素的方法,首先我们自己需要知道元素有哪些属性,这就需要用到安装测试环境中firebug来定位 打开firefox浏览器,按下F12键,我们就可以看到如下图所示的界面 ...

  5. mysql 开发进阶篇系列 41 mysql日志之慢查询日志

    一.概述 慢查询日志记录了所有的超过sql语句( 超时参数long_query_time单位 秒),获得表锁定的时间不算作执行时间.慢日志默认写入到参数datadir(数据目录)指定的路径下.默认文件 ...

  6. aliyun阿里云Maven仓库配置

    maven仓库用过的人都知道,国内有多么的悲催.还好有比较好用的镜像可以使用,尽快记录下来.速度提升100倍. http://maven.aliyun.com/nexus/#view-reposito ...

  7. 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  8. Spring Boot初识（1）-了解Spring Boot

    写在前面:半年工作经验的Java程序员一枚,奈何公司用的是自研的Web框架和RPC框架,本着good good study,day day up的精神和为以后发展的考虑觉得自己需要学点开源的东西,写的 ...

  9. 面试：C++观察者模式实现

    #include <list> class Subject; class Observer{ public: virtual ~Observer(){}; virtual void upd ...

  10. 微信公众平台.net HttpClient 异步客户端

    微信公众平台.net HttpClient 异步客户端 该客户端实现了对微信公众平台的后台管理,包括获取Token,发生客服消息(文本,图片,语音,视频),自定义菜单的创建,查询,删除,查询订阅用户, ...