文档章节

Vue。js学习系列(二十四)--条件语句(二)

博为峰教研组
 博为峰教研组
发布于 2017/03/16 14:01
字数 255
阅读 10
收藏 0

3.v-else

必须跟在v-if/v-show指令之后,不然不起作用;

如果v-if/v-show指令的表达式为true,则else元素不显示;如果v-if/v-show指令的表达式为false,则else元素显示在页面上;

下面我们通条件语句来判断2是否大于1,如果大于1则输出true,否则输出false

<!DOCTYPE html>v-else

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div v-if="2>1">

true

</div>

<div v-else>

false

</div>

</div>

<script type="text/javascript">

new Vue({

el:"#app"

})

</script>

 

</body>

</html>

运行结果:


 

4.v-else-if

v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div v-if="type==='A'">A</div>

<div v-else-if="type==='B'">B</div>

<div v-else-if="type==='C'">C</div>

<div v-else>not A/B/C</div>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

type:"A"

}

})

</script>

</body>

</html>

运行之后,在页面上显示A。

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
好程序员web前端分享菜鸟Vue学习笔记(二)

好程序员web前端分享菜鸟Vue学习笔记(二),今天天气不错,心情也不错,最近学习Vue越来越顺利了,今天接着学习,接着记录。 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中...

好程序员IT
05/09
30
0
2019 前端面试 | 知其然,并知其所以然

Web 前置知识 《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web01] 《初次接触前端,我们要理解哪些名词?》 《工欲善其事,必先利其器——软件安装、环境搭建》 《做一次山大王,...

itsOli
05/22
0
0
Vue从小白到大佬系列 (一) Vue是个啥?

啥是Vue? 当你看到这篇文章的时候,想必这位大侠难免多少略知Vue这个世界级别的框架的来头,华裔程序贵族尤雨溪大佬的开源作品(膜拜大佬三分钟...),从面世至今gitHub上的点赞数量已经超过Angul...

极客James
08/27
0
0
webpack系列之三loader详解3

系列作者:肖磊 GitHub: github.com/CommanderXL 前2篇文章:webpack loader详解1和webpack loader详解2主要通过源码分析了 loader 的配置,匹配和加载,执行等内容,这篇文章会通过具体的实...

滴滴WebApp架构组
02/21
0
0
如何用不到200行代码写一款属于自己的js框架

前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的框架。我们将会学到如下知识点: ...

徐小夕
07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向海量数据的极致成本优化-云HBase的一体化冷热分离

前言 随着业务的持续发展,业务数据库存储量会持续增长。通常数据量过亿时,就需要考虑做分库分表,或者选择扩展能力更好的NOSQL/NewSQL数据库,如HBase就可以单表支持PB级数据,足够满足大多...

阿里云官方博客
30分钟前
3
0
最新最全国内外架构开源技术干货资料

大家好,废话不多说,整理了精心收集了各类资源。 声明,如侵犯个人利益,请联系小编,会立即删除相关资料。 领取方式在文末 求转发列表 好了,由于资源太多啦,就不一一列举了。 大家按照下...

泥瓦匠BYSocket
32分钟前
6
0
springmvc jsp访问不了css

在jsp中引入css,一直报404错误,直接访问css,也无法访问 将css文件移出WEB-INF,因为处于安全性考虑,这个目录禁止外部访问。 当引用css时,可以直接用绝对路径${pageContext.request.conte...

沉迷于编程的小菜菜
34分钟前
4
0
android 系统版本 9.1网络请求遇到坑

网络请求异常: E/http: CLEARTEXT communication to plat.xunlinkeji.cn not permitted by network security policy 在res下新建一个xml目录 创建名为network_security_config.xml 文件 ,该......

MrLins
52分钟前
5
0
Istio 1.3 发布,HTTP 遥测不再需要 Mixer

> 原文链接:Istio 1.3 发布,HTTP 遥测不再需要 Mixer Istio 是 Google、IBM 和 Lyft 联合开源的服务网格(Service Mesh)框架,旨在解决大量微服务的发现、连接、管理、监控以及安全等问题...

米开朗基杨
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部