<!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. Linux - 快速进入目录的方法

    cd命令技巧 直接进入用户的home目录: cd ~ 进入上一个目录: cd - 进入当前目录的上一层目录: cd .. 进入当前目录的上两层目录: cd ../.. 其他常用方法 利用tab键,自动 ...

  2. Linux - 结合正则表达式使用grep命令

    Grep with Regular Expression grep命令基本用法 grep [-acinv] [--color=auto] [-A n] [-B n] '搜寻字符串' 文件名参数说明: ...

  3. iOS-SVProgressHUDMaskType

    SVProgressHUDMaskTypeNone:默认图层样式,当HUD显示的时候,允许用户交互.   SVProgressHUDMaskTypeClear:当HUD显示的时候,不允许用户交互.   ...

  4. 08-部署node节点

    部署kubernetes node节点 kubernetes node 节点包含如下组件: Flanneld: 省略,参照之前部署的文档 Docker1.12.5: 省略,参照之前部署的文档 kube ...

  5. spring boot -thymeleaf-url

    绝对路径格式:th:href="@{http://www.baidu.com}" <a th:href="@{http://www.baidu.com}" ...

  6. request和response简介

    Tomcat收到客户端的http请求,会针对每一次请求,分别创建一个代表请求的request对象.和代表响应的response对象. 既然request对象代表http请求,那么我们获取浏览器提交过来 ...

  7. linux中变量的一些操作方法

    常见的一般有如下操作,可以对字符串进行简单操作: echo ${#var}打印变量var长度 echo "$var:3:8" 打印变量var第4个字符开始的8个字符echo ${v ...

  8. 如何开始DDD(续)

    上一篇针对用户注册案例简单介绍了如何使用 DDD,接下来我将继续针对这个例子做一下补充.先将User模型丰富起来,因为目前看上去他和贫血模型还没有啥大的区别. 首先还是由领域专家来说明业务,他提出了用 ...

  9. Java第三方支付接入案例（支付宝）

    开源项目链接 Kitty 开源权限管理系统 项目地址:https://gitee.com/liuge1988/kitty 演示地址:http://139.196.87.48:9002/kitty 用户 ...

  10. 使用配置文件自定义Ribbon配置

    1.application.yml——Ribbon配置文件 debug: false spring: application: name: mcc-ribbon-properties cloud: c ...