VueJS循环语句：v-for
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div> <script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
</body>
</html>
效果：
v-for 迭代对象
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
</body>
</html>
效果：
遍历对象key-value
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
</body>
</html>
效果：
遍历对象key-value 带索引
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
</body>
</html>
效果：
v-for 迭代整数
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div> <script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
效果：
VueJS循环语句：v-for的更多相关文章
- 你可能不知道的java、python、JavaScript以及jquary循环语句的区别
一.概述 java循环语句分为四种形式,分别是 while, do/while, for, foreach: python中循环语句有两种,while,for: JavaScript中循环语句有四种, ...
- 序列for循环语句
序列for循环语句 序列for循环语句允许重复遍历一组序列,而这组序列可以是任何可以重复遍历的序列,如由begin()和end()函数定义的STL序列.所有的标准容器都可用作这种序列,同时它也同样可以 ...
- Swift流程控制之循环语句和判断语句详解
Swift提供了所有c类语言的控制流结构.包括for和while循环来执行一个任务多次:if和switch语句来执行确定的条件下不同的分支的代码:break和continue关键字能将运行流程转到你代 ...
- javascript里的循环语句
前序:我一直对于for跟for..in存在一种误解,我觉得for都能把事情都做了,为啥还要for...in...这玩意了,有啥用,所以今天就说说JavaScript里的循环语句. 循环 要计算1+2+ ...
- go语言的条件语句和循环语句
一,条件语句 常见的就是if语句: 单支条件语句: if 条件 :执行语句 (注,如果是没有逻辑运算符连接的话,是可以不需要括号的,也可以加上括号,如:if (条件):执行语句) 双支 ...
- shell脚本学习—条件测试和循环语句
条件测试 1. 条件测试:test [ 命令test或[可以测试一个条件是否成立,如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假, 则命令的Exit Status为1(注意与 ...
- 【shell】shell编程（四）-循环语句
上篇我们学习了shell中条件选择语句的用法.接下来本篇就来学习循环语句.在shell中,循环是通过for, while, until命令来实现的.下面就分别来看看吧. for for循环有两种形式: ...
- Python循环语句及函数的定义
循环语句¶ 重复执行某一个固定的动作或者任务 语法 for 变量 in序列: 语句1 语句2 ..... In [2]: # 列表知识只是以后会讲 # 比如[1,2,3,4,5,6,7] list ...
- 循环语句for基本概述
循环语句for基本概述 01. for循环基础语法 for 变量名 in [ 取值列表 ]do 循环体done 02. for循环基本使用示例 #取值列表有多种取值方式,可以直接读取in后面的值,默认 ...
随机推荐
- c#的字典序
//Dictionary System.Collections.DictionaryEntry dic=new System.Collections.DictionaryEntry("key ...
- POJ2478 Farey Sequence
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15023 Accepted: 5962 Description The ...
- 【HDOJ5976】Detachment（贪心）
题意:给定n,要求构造若干个各不相同且和为n的正整数使得它们的乘积最大 T<=1e6,1<=n<=1e9 思路:From https://blog.csdn.net/qq_34374 ...
- SQL中的CASE WHEN使用
原文发布时间为:2010-06-04 -- 来源于本人的百度文章 [由搬家工具导入] SQL的条件语句，条件判断语句，SQL的 if else语句。2009-07-20SQL_中的CASE WHEN使 ...
- duilib入门简明教程 -- 第一个程序 Hello World(3) （转）
原文转自 http://www.cnblogs.com/Alberl/p/3343579.html 小伙伴们有点迫不及待了么,来看一看Hello World吧: 新建一个空的win32项目,新建一个m ...
- android中提示&对话框----Notification
Notification(状态栏通知) 一.Notification用于状态栏显示通知的控件,在不同的设备上面Notification是不一样的 二.Notification的基本布局 元素组成: I ...
- LeetCode OJ-- Valid Sudoku
https://oj.leetcode.com/problems/valid-sudoku/ 给出数独的一部分来,验证给出的这一部分是否为 valid 行上无重复的,且是从 ‘1’ 到‘9’ 列上无重 ...
- 【转】awk的使用及字符串的操作
awk教程 转载[awk的使用及字符串的操作] sed版: sed '1~2d' file #删除奇数行 sed '1~2!d' file #删除偶数行 awk版: awk 'NR%2==0' fil ...
- TiKV 源码解析系列——Placement Driver
https://zhuanlan.zhihu.com/p/24809131?refer=newsql
- JetBrains软件开发框架下的类似于“.IntelliJIdea2018.1”的配置文件夹的移动
JetBrains软件开发框架下几款软件,如: 会在C盘用户文件夹下生成很大的配置文件夹(IDE config folder),十分占空间,也影响电脑性能. 这些索引目录移动的原理相似,现在以Idea ...