Vue2.0 【第一季】第2节 v-if v-else v-show 指令
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 指令的更多相关文章
- 分布式压测系列之Jmeter4.0第一季
1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...
- 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节 ...
- 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- ...
- Vue2.0 【第一季】第6节 v-model指令
目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...
- Vue2.0 【第一季】第5节 v-on：绑定事件监听器
目录 Vue2.0 [第一季] 第5节 v-on:绑定事件监听器 第五节 v-on:绑定事件监听器 一.使用绑定事件监听器,编写一个加分减分的程序. Vue2.0 [第一季] 第5节 v-on:绑定事 ...
- 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 第 ...
- Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题
目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...
- Vue2.0 【第一季】第1节 走进我的Vue2.0
目录 Vue2.0 [第一季]内部指令 第一节 走进我的Vue2.0 Vue2.0 [第一季]内部指令 记录一下我的代码地址:D:/Code/Vue 编辑器:VS code 前置知识: 1.HTML的 ...
- Vue2.0 【第二季】第7节 Component 组件 props 属性设置
目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
随机推荐
- 通过HTTP向kafka发送数据
在大数据整个处理流程过程中,数据的流向是一个很重要的问题,本篇博客主要记录数据是怎么从http发送到kafka的. 使用技术点: 1. java的Vert.x框架 (关于java框架Vert.x的使用 ...
- highcharts series几种写法
一.数据列 数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列 ...
- 赫夫曼解码(day17)
思路: 传入map(字节与对应字节出现的次数)和最后生成的要传送的字节.将他们先转换成对应的二进制字节,再转换成原来的字符串. 代码: 12345678910111213141516171819202 ...
- Vue axios 跨域访问Session，两次得到的Session不是同一个Session
这个问题是因为,后台无法确认你是同一个“人”访问服务器,两次访问都给了你一个全新的Session,所以第一次保存的信息第二次请求无法得到,我的理解是,在跨域中,携带Cookie信息访问,即可让服务器确 ...
- 在MVC模式下通过Jqgrid表格操作MongoDB数据
看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是 ...
- Hessian简介
Hessian Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为 ...
- Spring Boot 鉴权之—— springboot2.0.4+mybatis 整合的完整用例
自上一篇文章的基础上,Spring Boot 鉴权之—— JWT 鉴权我做了一波springboot2.0.4+mybatis 的整合. 参考文章: Spring Boot+Spring Securi ...
- mysqldump免密备份方法
注意:1.暂时只试验了root用户 2.暂时只试验了5.6和5.7两个版本 1.我用的root用户,先进入家目录 cd ~ 2.vim .my.cnf #在家目录添加该文件 [mysqldum ...
- 在Docker中运行gocd
gocd是一个持续集成的工具,可视化效果非常好 运行gocd-server 12345 docker run -d --name server -p8153:8153 -p8154:8154 -v / ...
- marquee用到的属性
一.marquee标签的几个重要属性: 1.direction:滚动方向(包括4个值:up.down.left.right) 说明:up:从下向上滚动:down:从上向下滚动:left:从右向左滚 ...