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(六):条件与循环的更多相关文章

  1. Vue.js 条件与循环

    条件判断: v-if: 条件判断使用 v-if 指令: v-else-if:(其实和Java,c,js的语法差不多) v-show:

  2. Vue.js:条件与循环

    ylbtech-Vue.js:条件与循环 1.返回顶部 1. Vue.js 条件与循环 条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-i ...

  3. Python核心编程读笔 7: 条件和循环

    第八章 条件和循环 一.if python中的条件表达式:很奇葩!!! smaller = (x < y and [x] or [y])[0] 或者: smaller = x if x < ...

  4. C语言程序设计第六次作业——循环结构(2)

    C语言程序设计第六次作业--循环结构(2) 之前的博客园图片没处理好,对大家说一声抱歉.希望大家能够多多指出我的错误,我来认真修改 ^ - ^ !. (1)改错题 序列求和:输入一个正实数eps,计算 ...

  5. js基础(条件语句 循环语句)

    条件语句 if语句块的语法形式如下: //只有两种情况下if(条件){要执行的语句块;}else{要执行的语句块;} //多种情况下if(条件){要执行的语句块;}else if(条件){要执行的语句 ...

  6. Python基础之条件和循环

    阅读目录 一.if语句 1.1功能 1.2语法 1.2.1:单分支,单重条件判断 1.2.2:单分支,多重条件判断 1.2.3:if + else 1.2.4:多分支if + elif +else 1 ...

  7. linux shell 流程控制(条件if,循环【for,while】,选择【case】语句实例 --转载

    http://www.cnblogs.com/chengmo/archive/2010/10/14/1851434.html nux shell有一套自己的流程控制语句,其中包括条件语句(if),循环 ...

  8. Python基础(6)--条件、循环

    本文的主要内容是 Python 的条件和循环语句以及与它们相关的部分. 我们会深入探讨if, while, for以及与他们相搭配的else,elif,break,continue和pass语句. 本 ...

  9. Python 2.7 学习笔记 条件与循环语句

    本文介绍下python条件和循环语句的语法 一.if条件语句 语法格式如下: if 表达式: .... elif 表达式: .... elif 表达式: .... else: ..... 说明:与其它 ...

  10. Beginning Python From Novice to Professional (5) - 条件与循环

    条件与循环 条件运行: name = raw_input('What is your name? ') if name.endswith('Gumby'): print 'Hello, Mr.Gumb ...

随机推荐

  1. MySQL快速建立测试表

    1:只要已经存在表结构的 第一种方式: CREATE TABLE T1 SELECT * FROM mysql.user ; 第二种方式: CREATE TABLE T2 LIKE mysql.use ...

  2. Cocos2d 编译js为jsc bytecode文件

    使用: cocos jscompile -s XXX(目录名,会递归) -d (输出的目录)   但编译后的jsc比原来的js更大了     如果只是为了代码的保密性,也许只需要用yuicompres ...

  3. java json与map互相转换(二)

      java json与map互相转换(二) CreationTime--2018年7月16日15点09分 Author:Marydon 1.准备工作 所需jar包: commons-beanutil ...

  4. http中的get和post的区别

    get:相当于查找数据,从server中取数据,不会改变server端的数据: post:相当于更新数据,他会更新server端的数据: 所有的http操作(增删改查)都能通过对应的get和post获 ...

  5. IM系统架构设计之浅见

    转自:http://mobile.51cto.com/hot-439693.htm 背景:除去大名鼎鼎的QQ这款即时聊天工具,还有许多细分行业的IM,比如淘宝阿里旺旺.网易泡泡.YY语音....... ...

  6. 转:Ogre源码分析之Root类、Facade模式

    Ogre源码分析(一)Root类,Facade模式 Ogre中的Root对象是一个Ogre应用程序的主入口点.因为它是整个Ogre引擎的外观(Façade)类.通过Root对象来开启和停止Ogre是最 ...

  7. BigDecimal去除末尾多余的0

    Java有自带的 stripTrailingZeros() 方法用于去除末尾多余的0 BigDecimal num = new BigDecimal("100.000"); Big ...

  8. STRTOK函数和STRTOK_R函数

    STRTOK函数和STRTOK_R函数 注:本文转载自博客园,感谢作者整理! 1.一个应用实例 网络上一个比较经典的例子是将字符串切分,存入结构体中.如,现有结构体 typedef struct pe ...

  9. 要成为linux网站运维工程师必须要掌握的技能

    要成为linux网站运维工程师必须要掌握的技能 2015-07-27 发表 老男孩点评:感谢此文的作者,写的非常到位,值得入门的初学者认真看看 我是一名linux运维工程师,确切的说是网站运维工程师, ...

  10. Ant压缩与解压缩

    package com.test.utils; import java.io.File; import java.io.FileOutputStream; import java.io.InputSt ...