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 ...
随机推荐
- MySQL快速建立测试表
1:只要已经存在表结构的 第一种方式: CREATE TABLE T1 SELECT * FROM mysql.user ; 第二种方式: CREATE TABLE T2 LIKE mysql.use ...
- Cocos2d 编译js为jsc bytecode文件
使用: cocos jscompile -s XXX(目录名,会递归) -d (输出的目录) 但编译后的jsc比原来的js更大了 如果只是为了代码的保密性,也许只需要用yuicompres ...
- java json与map互相转换(二)
java json与map互相转换(二) CreationTime--2018年7月16日15点09分 Author:Marydon 1.准备工作 所需jar包: commons-beanutil ...
- http中的get和post的区别
get:相当于查找数据,从server中取数据,不会改变server端的数据: post:相当于更新数据,他会更新server端的数据: 所有的http操作(增删改查)都能通过对应的get和post获 ...
- IM系统架构设计之浅见
转自:http://mobile.51cto.com/hot-439693.htm 背景:除去大名鼎鼎的QQ这款即时聊天工具,还有许多细分行业的IM,比如淘宝阿里旺旺.网易泡泡.YY语音....... ...
- 转:Ogre源码分析之Root类、Facade模式
Ogre源码分析(一)Root类,Facade模式 Ogre中的Root对象是一个Ogre应用程序的主入口点.因为它是整个Ogre引擎的外观(Façade)类.通过Root对象来开启和停止Ogre是最 ...
- BigDecimal去除末尾多余的0
Java有自带的 stripTrailingZeros() 方法用于去除末尾多余的0 BigDecimal num = new BigDecimal("100.000"); Big ...
- STRTOK函数和STRTOK_R函数
STRTOK函数和STRTOK_R函数 注:本文转载自博客园,感谢作者整理! 1.一个应用实例 网络上一个比较经典的例子是将字符串切分,存入结构体中.如,现有结构体 typedef struct pe ...
- 要成为linux网站运维工程师必须要掌握的技能
要成为linux网站运维工程师必须要掌握的技能 2015-07-27 发表 老男孩点评:感谢此文的作者,写的非常到位,值得入门的初学者认真看看 我是一名linux运维工程师,确切的说是网站运维工程师, ...
- Ant压缩与解压缩
package com.test.utils; import java.io.File; import java.io.FileOutputStream; import java.io.InputSt ...