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 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...
随机推荐
- LeetCode Day 2
LeetCode0004 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 n ...
- CF-1111B-Average Superhero Gang Power
首先,对于这题我们要知道要删除一个数使平均值最大一定是删除最小的数,然后我们假设删除操作执行了i次,也就是删除最小的i个数.在已知删除操作次数之后求增加操作的次数就容易了,当然是m - i和k * ( ...
- Apache2配置腾讯云SSL证书
首先去腾讯云申请免费的SSL证书,下载下来解压后里面有一个Apache文件夹,里面有三个文件,接下来会用到. 上传证书 将上一步的三个文件上传到/etc/ssl里 启用SSL模块 启用a2enmod ...
- 扎心！来自互联网er的2019年度总结，看完笑着流泪……
转眼2019年已经接近尾声,又到了年度总结的时候了.过去一年,你加了多少班,熬了多少夜,回想起来历历在目.互联网人2019年度总结,看完扎心了-- 01 - 这一年里 你一共提了275个需求 其中27 ...
- 阿里云vpc网络SNAT实现内网实例通外网
需求场景: 因费用和安全考虑,内网部分机器没有分配公网IP,没绑定弹性公网IP,没有购买NAT服务,但是内网机器需要访问外网部分资源,如发送邮件. 操作步骤如下: 1.查看外网上的转发功能的开启没开启 ...
- PHP正则表达式-修饰符
我们在PHP正则表达式的学习中会碰到修饰符,那么关于PHP正则表达式修饰符的理解以及使用我们需要注意什么呢?那么我们来具体的看看它的概念以及相关内容.在学习PHP正则表达式修饰符之前先来理解下贪婪模式 ...
- 从赴美IPO绝迹 看那些烧成泡沫的互联网企业
曾经,赴美上市是很多中国企业的终极梦想.然而在当下,随着中概股在美国股市股价的不断走低.中国赴美上市企业私有化速度的加快,大众才发现,原来美国股市并不是那么好混的.但不管怎样,赴美上市始终是一种荣耀. ...
- textarea 实现高度自动增长
有时候希望textarea 能够自动调整高度来适应输入的内容 网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因 ...
- Vizceral小白入门
Vizceral小白入门 接到一个任务,要求将N个program可视化,能一目了然查看当前爬虫状态.记得之前做测试时,一个queue service前端可视化效果不错,经询问是用vizceral开源框 ...
- GO - if判断，for循环，switch语句，数组的使用
1.if - else if - else的使用 package main import "fmt" func main() { // 1.简单使用 var a=10 if a== ...