文档章节

Vuejs学习系列(二十三)-- 条件语句(一)

博为峰教研组
 博为峰教研组
发布于 2017/03/16 13:54
字数 334
阅读 9
收藏 0

Vue.js中实现条件判断的可以使用以下4个指令,它们分别是

1. v-if

2. v-show

3. v-else

4. v-else-if

1. v-if

 v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

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

</head>

<body>

<div id="example">

 <p v-if="male">Male</p>

 <p v-if="female">Female</p>

 <p v-if="age>25">Age:{{age}}</p>

 <p v-if="name.indexOf('o')>0">Name:{{name}}</p>

</div>

<script type="text/javascript">

var vm= new Vue({

 el:"#example",

 data:{

 male:true,

 female: false,

 age:29,

 name:'clone'

 }

 })

</script>

 

</body>

</html>

 

运行结果如下;

由运行结果可以看出,只有当v-if后面的表达式值为true时,对应的值才会显示在页面上。也就是说v-if指令只渲染他身后表达式为true的元素。这样我们就会看出它的不足之处,那表达式为false的元素,该如何渲染呢?此时就需要v-show指令。v-show指令会渲染他身后表达式为false的元素。这样的元素上会添加css代码:style="display:none"; 将上面v-if的实例代码改为v-show,页面渲染效果为:

 

v-show 与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none";

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
如何优化我们的代码(vue项目)

前言 作为一个前端,可能绝大多数的时间都是在写的业务代码,可能时间一长,大家会觉得乏味、没意思等等,但是其实就算只是写业务代码,我们也依然能够找到有兴趣的点,说的简单一点就是代码...

qiugu
04/08
0
0
小白教程|一小时上手最流行的前端框架vue

前言 vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架。相比angular和react,vue更加轻巧、高性能、也很容易上手。大家也可以移步vue...

全栈社区
04/08
0
0
开篇:HelloDjango!Django全栈开发系列教程

HelloDjango!Django全栈开发系列教程 欢迎 追梦 入伙 HelloGitHub-Team,同时为我们带来了完全免费的 HelloDjango 系列教程,全网首发于 HelloGitHub 公众号。让想你的系列文章被跟多人看到...

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

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

极客James
08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

堆”和“栈

C++作为一款C语言的升级版本,具有非常强大的功能。它不但能够支持各种程序设计风格,而且还具有C语言的所有功能。我们在这里为大家介绍的是其中一个比较重要的内容,C++内存区域的基本介绍。...

SibylY
18分钟前
2
0
总结:Https

一、介绍 简单理解,https即在http协议的基础上,增加了SSL协议,保障数据传输的安全性。 它由以前的http—–>tcp,改为http——>SSL—–>tcp;https采用了共享密钥加密+公开密钥加密的方式 ...

浮躁的码农
20分钟前
2
0
数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
51分钟前
6
0
MySQL 表崩溃修复

MySQL日志报错 2019-10-19 13:41:51 19916 [ERROR] /usr/local/mysql/bin/mysqld: Table './initread_hss/user_info' is marked as crashed and should be repaired2019-10-19 13:41:51 1......

雁南飞丶
今天
6
0
Error和Exception

1.Error类和Exception类都是继承Throwable类 2.Error(错误)是系统中的错误,程序员是不能改变的和处理的,是在程序编译时出现的错误,只能通过修改程序才能修正。一般是指与虚拟机相关的问...

大瑞清_liurq
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部