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 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
随机推荐
- ambulance|severely|halt
N-COUNT 救护车An ambulance is a vehicle for taking people to and from hospital. very seriously 严重地 Thei ...
- mysql 事务处理 （转）
事务处理在各种管理系统中都有着广泛的应用,比如人员管理系统,很多同步数据库操作大都需要用到事务处理.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如 ...
- JDBC原理之层次结构
目录 JDBC的层次结构 前言 Collection角色 Statement角色 ResultSet角色 JDBC工作的基本流程 JDBC的层次结构 前言 JDBC API提供了以下接口和类: Dri ...
- python3爬虫：利用urllib与有道翻译获得翻译结果
在实现这一功能时遇到了一些困难,由于按照<零基础入门python>中的代码无法实现翻译,会爆出“您的请求来源非法,商业用途使用请关注有道翻译API官方网站“有道智云”: http://ai ...
- 链终止法|边合成边测序|Bowtie|TopHat|Cufflinks|RPKM|FASTX-Toolkit|fastaQC|基因芯片|桥式扩增|
生物信息学 Sanger采用链终止法进行测序 带有荧光基团的ddXTP+其他四种普通的脱氧核苷酸放入同一个培养皿中,例如带有荧光基团的ddATP+普通的脱氧核苷酸A.T.C.G放入同一个培养皿,以此类 ...
- django应用的测试
本文章默认用户使用win10系统,并且已经安装pycharm.git.django2.2.5及配套第三方库(python3.6.0及以上版本,且为anaconda环境) 前言 其实在上一期django ...
- POJ 2112 Optimal Milking 最短路 二分构图 网络流
题意:有C头奶牛,K个挤奶站,每个挤奶器最多服务M头奶牛,奶牛和奶牛.奶牛和挤奶站.挤奶站和挤奶站之间都存在一定的距离.现在问满足所有的奶牛都能够被挤奶器服务到的情况下,行走距离的最远的奶牛的至少要走 ...
- 多方论战！市场到底看重VR哪些特质
VR即Virtual Reality的缩写,中文译为"虚拟现实".近年来,VR的概念不断升温,三星.谷歌.微软.索尼.HTC等互联网巨头纷纷杀入VR市场,甚至催生出许多商业神话. ...
- ERROR: Error in Log_event::read_log_event(): 'Found invalid event in binary log', data_len: 31, event_type: 35报错处理
centos7系统MySQL5.7在用mysqlbinlog命令查询binlog日志时刚开始查询即自动终止查询,查了一下该日志有300M,于是仔细看发现有报错,见下图: 在网上查找经验贴http:// ...
- Jennifer Chayes: 生活始终在你手中
Jennifer Chayes 听到Mark Kac.Freeman J. Dyson.林家翘,或者是David I. Gottlie.BerndSturmfels和Sir John Ball等 ...