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. simplify-path-字符串处理,去除多余路径

    题目描述 Given an absolute path for a file (Unix-style), simplify it. For example,path ="/home/&quo ...

  2. Spring MVC 零配置 / Spring MVC JavaConfig

    1. Spring MVC的核心就是DispatcherServlet类,Spring MVC处理请求的流程如下图所示: 2. Spring MVC中典型的上下文层次 当我们初始化一个Dispatch ...

  3. oracle 判断字符串是否包含指定内容

      1.情景展示 如何将表中的包含特殊字符的脏数据查出来? 2.instr()函数 语法: instr(string, substring[, start_position[, th_appearan ...

  4. 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 ...

  5. Java Web(5) Spring 下使用Junit4 单元测试

    1. 如何在不启动Tomcat服务器的情况下对,Dao这些不依赖使用Servlet API的类来进行单元测试呢? 其实在Spring框架体系中,已经有一套自己的测试代码,其中就是依赖使用Junit来进 ...

  6. Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境

    Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标 ...

  7. Ubuntu创建新用户并增加管理员权限(授权有问题)

    转自:Ubuntu创建新用户并增加管理员权限 $是普通管员,#是系统管理员,在Ubuntu下,root用户默认是没有密码的,因此也就无法使用(据说是为了安全).想用root的话,得给root用户设置一 ...

  8. struts2基本配置详解2

    接上篇struts2基本配置详解,还有一些配置没有讲到,下面将继续. struts.xml <package name="com.amos.web.action" names ...

  9. linux shell 脚本攻略学习8---md5校验,sort排序,uniq命令详解

    一.校验与核实 目前最为出名的校验技术是md5sum和sha1sum,它们对文件内容使用相应的算法来生成校验和. 举例: amosli@amosli-pc:~/learn$ md5sum text.t ...

  10. html5界面手机播放mp3

    1把这段代码复制到htm5界面. <audio id="audio" src="2.mp3" style="opacity:0" pr ...