Vue(六):条件与循环
1.条件(v-if)
控制切换一个元素是否显示
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
v-else-if和v-else
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
<div id="app">
{{username}}的成绩
<br>
<p v-if="randomnum < 6 && randomnum > 0">不及格</p>
<p v-else-if="randomnum < 8 && randomnum >= 6">良</p>
<p v-else-if="randomnum <= 10 && randomnum >= 8">优</p>
<p v-else>缺考</p>
</div> <script>
new Vue({
el:"#app",
data:{
"username":"小小",
"randomnum":Math.random()*10
}
})
</script>
这段代码多运行几次,会出现不同的结果。
v-show
也可以使用 v-show 指令来根据条件展示元素
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div> <script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
2.循环(v-for)
绑定数组数据渲染列表
<div id="app">
<table>
<tr v-for="device in devices">
<td>{{device.devicetype}}</td>
<td>{{device.devicenumber}}</td>
</tr>
</table>
</div>
<script>
var data = {
"devices":[
{"devicetype":"电梯","devicenumber":2625377},
{"devicetype":"起重机","devicenumber":2625378}
]
}
new Vue({
el: '#app',
data:data
});
</script>
分别显示index、key和value
<div id="app">
<ul>
<li v-for="(value, key, index) in team">
{{index}} . {{key}} : {{value}}
</li>
</ul>
</div> <script>
new Vue({
el:'#app',
data:{
team:{
name:'小王',
age:26,
group:'销售部'
}
}
})
</script>
迭代整数
<div id="app">
<ul>
<li v-for="n in 5">
{{n}}
</li>
</ul>
</div> <script>
new Vue({
el:'#app'
})
</script>
Vue(六):条件与循环的更多相关文章
- Vue.js 条件与循环
条件判断: v-if: 条件判断使用 v-if 指令: v-else-if:(其实和Java,c,js的语法差不多) v-show:
- Vue.js:条件与循环
ylbtech-Vue.js:条件与循环 1.返回顶部 1. Vue.js 条件与循环 条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-i ...
- Python核心编程读笔 7: 条件和循环
第八章 条件和循环 一.if python中的条件表达式:很奇葩!!! smaller = (x < y and [x] or [y])[0] 或者: smaller = x if x < ...
- C语言程序设计第六次作业——循环结构(2)
C语言程序设计第六次作业--循环结构(2) 之前的博客园图片没处理好,对大家说一声抱歉.希望大家能够多多指出我的错误,我来认真修改 ^ - ^ !. (1)改错题 序列求和:输入一个正实数eps,计算 ...
- js基础(条件语句 循环语句)
条件语句 if语句块的语法形式如下: //只有两种情况下if(条件){要执行的语句块;}else{要执行的语句块;} //多种情况下if(条件){要执行的语句块;}else if(条件){要执行的语句 ...
- Python基础之条件和循环
阅读目录 一.if语句 1.1功能 1.2语法 1.2.1:单分支,单重条件判断 1.2.2:单分支,多重条件判断 1.2.3:if + else 1.2.4:多分支if + elif +else 1 ...
- linux shell 流程控制(条件if,循环【for,while】,选择【case】语句实例 --转载
http://www.cnblogs.com/chengmo/archive/2010/10/14/1851434.html nux shell有一套自己的流程控制语句,其中包括条件语句(if),循环 ...
- Python基础(6)--条件、循环
本文的主要内容是 Python 的条件和循环语句以及与它们相关的部分. 我们会深入探讨if, while, for以及与他们相搭配的else,elif,break,continue和pass语句. 本 ...
- Python 2.7 学习笔记 条件与循环语句
本文介绍下python条件和循环语句的语法 一.if条件语句 语法格式如下: if 表达式: .... elif 表达式: .... elif 表达式: .... else: ..... 说明:与其它 ...
- Beginning Python From Novice to Professional (5) - 条件与循环
条件与循环 条件运行: name = raw_input('What is your name? ') if name.endswith('Gumby'): print 'Hello, Mr.Gumb ...
随机推荐
- simplify-path-字符串处理,去除多余路径
题目描述 Given an absolute path for a file (Unix-style), simplify it. For example,path ="/home/&quo ...
- Spring MVC 零配置 / Spring MVC JavaConfig
1. Spring MVC的核心就是DispatcherServlet类,Spring MVC处理请求的流程如下图所示: 2. Spring MVC中典型的上下文层次 当我们初始化一个Dispatch ...
- oracle 判断字符串是否包含指定内容
1.情景展示 如何将表中的包含特殊字符的脏数据查出来? 2.instr()函数 语法: instr(string, substring[, start_position[, th_appearan ...
- C# 7 out variables, tuples & other new features
C# 7 out variables, tuples & other new features C# 7 is available on new Visual Studio 2017 and ...
- Java Web(5) Spring 下使用Junit4 单元测试
1. 如何在不启动Tomcat服务器的情况下对,Dao这些不依赖使用Servlet API的类来进行单元测试呢? 其实在Spring框架体系中,已经有一套自己的测试代码,其中就是依赖使用Junit来进 ...
- Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境
Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标 ...
- Ubuntu创建新用户并增加管理员权限(授权有问题)
转自:Ubuntu创建新用户并增加管理员权限 $是普通管员,#是系统管理员,在Ubuntu下,root用户默认是没有密码的,因此也就无法使用(据说是为了安全).想用root的话,得给root用户设置一 ...
- struts2基本配置详解2
接上篇struts2基本配置详解,还有一些配置没有讲到,下面将继续. struts.xml <package name="com.amos.web.action" names ...
- linux shell 脚本攻略学习8---md5校验,sort排序,uniq命令详解
一.校验与核实 目前最为出名的校验技术是md5sum和sha1sum,它们对文件内容使用相应的算法来生成校验和. 举例: amosli@amosli-pc:~/learn$ md5sum text.t ...
- html5界面手机播放mp3
1把这段代码复制到htm5界面. <audio id="audio" src="2.mp3" style="opacity:0" pr ...