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 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
随机推荐
- 点分治——POJ 1741
写的第一道点分治的题目,权当认识点分治了. 点分治,就是对每条过某个点的路径进行考虑,若路径不经过此点,则可以对其子树进行考虑. 具体可以看menci的blog:点分治 来看一道例题:POJ 1741 ...
- postman接口测试使用
在做测试之前,先要了解一下http相关的一些知识,这样做起来才会更加顺手. http的请求分为header 和 body,一般在header里面放一些其他的信息,比如cookie,浏览器信息 body ...
- SHELL用法五（Case语句）
1.SHELL编程Case语句案例实战 1)Case选择条件语句的格式: case $INPUT in Pattern1) 语句1 ;; Pattern2) 语句2 ;; esac 2)Case语句企 ...
- PowerDesigner的文章
来自iteye的PowerDesigner的相关文章,写的不错,这里引用一下 PD12 建模工具的使用 博客分类: PowerDesigner .net http://jpkc.zjbti.net.c ...
- JavaScript深入浅出-闭包
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function (){ var localVal ...
- 修改xampp中phpmyadmin用户管理
用相关软件打开位于D:/xampp/phpMyAdmin文件夹中的config.inc.php文件. 搜索$cfg['Servers'][$i]['auth_type'] = 'config'; 将其 ...
- zookeeper 客户端连接报： Will not attempt to authenticate using SASL
解决方法:我在学习zk的时候,用客户端连接zk,发现接收不到watch通知,并且报 如图所示错误: 后查看服务没问题:图示 后查看防火墙状态,关闭防火墙 连接后正常: 如果查看防火墙状态是dead,s ...
- SpringMVC之请求响应(上)
1.OutPutController package com.tz.controller; import java.util.Map; import org.springframework.stere ...
- Docker Container开机自动启动
重启策略: 使用在Docker run的时候使用--restart参数来设置. no - Container不重启 on-failure - container推出状态非0时重启 always - 始 ...
- 查漏补缺：Vector中去重
对于STL去重,可以使用<algorithm>中提供的unique()函数. unique()函数用于去除相邻元素中的重复元素(所以去重前需要对vector进行排序),只留下一个.返回去重 ...