Vue2.0 【第一季】第2节 v-if v-else v-show 指令

第二节 v-if v-else v-show 指令

2.1 v-if指令、v-else指令：

是vue的一个内部指令，用在html中。

用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

  • v-if.html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../assets/js/vue.js"></script>

    <title>v-if & v-show & v-else</title>

</head>

<body>

    <h1>v-if 判断是否加载</h1>

    <hr>

    <div id="app">

        <div v-if="isLogin">你好：Da0sy</div>  //关键代码

        <div v-else>请登录后操作</div>

    </div>

    <script type="text/javascript">

        var app=new Vue({

            el:'#app',

            data:{

               isLogin:true

            }

        })

    </script>

</body>

</html>

浏览器效果：

这里我们在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：Da0sy，如果为false时，就显示请登录后操作。

2.2 v-show的使用：

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<div v-show="isLogin">你好：Da0sy</div>

v-if 和v-show的区别：

  • v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
  • v-show：调整css dispaly属性，可以使客户端操作更加流畅。

Vue2.0 【第一季】第2节 v-if v-else v-show 指令的更多相关文章

  1. 分布式压测系列之Jmeter4.0第一季

    1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...

  2. Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once

    目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...

  3. Vue2.0 【第一季】第7节 v-bind指令

    目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...

  4. Vue2.0 【第一季】第6节 v-model指令

    目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...

  5. Vue2.0 【第一季】第5节 v-on：绑定事件监听器

    目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...

  6. Vue2.0 【第一季】第4节 v-text & v-html

    目录 Vue2.0 [第一季]第4节 v-text & v-html 第四节 v-text & v-html Vue2.0 [第一季]第4节 v-text & v-html 第 ...

  7. Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  8. Vue2.0 【第一季】第1节 走进我的Vue2.0

    目录 Vue2.0 [第一季]内部指令 第一节 走进我的Vue2.0 Vue2.0 [第一季]内部指令 记录一下我的代码地址:D:/Code/Vue 编辑器:VS code 前置知识: 1.HTML的 ...

  9. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

随机推荐

  1. javascript常用知识汇总

    javascript这个语言庞大而复杂,我用了三年多了,还是皮毛都不会.从刚开始的jquery,到后来的es6,每天都在学习,每天都在忘记. 1.禁止手机虚拟键盘弹出 在开发适配手机的页面时,出现了这 ...

  2. [LC] 362. Design Hit Counter

    Design a hit counter which counts the number of hits received in the past 5 minutes. Each function a ...

  3. 【一定要记得填坑】LG_3822_[NOI2017]整数

    挺好的一道题,由于快noip了,所以打算noip之后再添题解的坑.

  4. SpringBoot自动配置的原理

    Spring Boot的运行是由注解@EnableAutoConfiguration提供的它的关键功能是@Import注解.        EnableAutoConfigurationImportS ...

  5. python中sorted和sorted 、reversed和reverse的使用。

    #encoding = utf-8 list = [1,8,3,6] print(list.sort()) #None print(list) #[1,3,6,8] print(sorted(list ...

  6. 第十届javaB(5)

    试题 E: 迷宫 本题总分:15 分[问题描述] 下图给出了一个迷宫的平面图,其中标记为 1 的为障碍,标记为 0 的为可 以通行的地方.010000 000100 001001 110000迷宫的入 ...

  7. python ATM项目

    1.需求: 指定最大透支额度 可取款 定期还款(每月指定日期还款,如15号) 可存款 定期出账单 支持多用户登陆,用户间转帐 支持多用户 管理员可添加账户.指定用户额度.冻结用户等 购物车: 商品信息 ...

  8. 服务治理与RPC · 跬步

    以前写过Django中使用zerorpc的方法,但是由于我们的Django是运行在gevent下,而zeromq需要启动一个后台进程处理消息,与gevent使用的greenlet携程是冲突的. 在Ja ...

  9. 《和莎莫的 500 天》中为什么 Summer 最终没有和 Tom 在一起？

    好的电影总是需要仔细赏味几次,每次也都会有不同的收获.就像我钟爱的[500 days of summer]. 彪悍的大胡子导演MarcWebb实在是太有趣,把自己的亲身经历搬上大荧幕,因为" ...

  10. C++走向远洋——30（六周，项目一1.0）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:fenshu.cpp * 作者:常轩 * 微信公众号:World ...