循环使用 v-for 指令。
循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
<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>
可以提供第二个的参数为键名:
<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>
第三个参数为索引:
<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>
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
循环使用 v-for 指令。的更多相关文章
- Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- v:bind指令对于传boolean值的注意之处
1,
- 汇编语言--微机CPU的指令系统(五)(循环指令)
(8)循环指令 循环结构是程序的三大结构之一.为了方便构成循环结构,汇编语言提供了多种循环指令,这些循环指令的循环次数都是保存在计数器CX或ECX中.除了CX或ECX可以决定循环是否结束外,有的循环指 ...
- angular自定义指令 repeat 循环结束事件;limitTo限制循环长度、限定开始位置
1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...
- Python虚拟机之while循环控制结构(三)
Python虚拟机中的while循环控制结构 在Python虚拟机之if控制流(一)和Python虚拟机之for循环控制流(二)两个章节中,我们介绍了if和for两个控制结构在Python虚拟机中的实 ...
- matlab中for 用来重复指定次数的 for 循环
参考:https://ww2.mathworks.cn/help/matlab/ref/for.html?searchHighlight=for&s_tid=doc_srchtitle for ...
- x01.os.6: 8086 指令
M:存储器A:累加器R:寄存器SEGR:段寄存器IMM:立即数X:标志位状态依运算或操作结果而定U:相应标志位未定义-:不影响 数据传送指令 时钟数 访问次数 字节数 对标志位影响 指令意义 MOV ...
- 学习linux内核时常碰到的汇编指令(1)
转载:http://blog.sina.com.cn/s/blog_4be6adec01007xvg.html 80X86 汇编指令符号大全 +.-.*./∶算术运算符. &∶宏处理操作符. ...
- 序列for循环语句
序列for循环语句 序列for循环语句允许重复遍历一组序列,而这组序列可以是任何可以重复遍历的序列,如由begin()和end()函数定义的STL序列.所有的标准容器都可用作这种序列,同时它也同样可以 ...
- FreeMarker 自己定义指令(三)
1. 模板文件 test04.ftl foo <@customUpper> bar f <#-- 这里同意使用全部的 FTL --> <#list ["red& ...
随机推荐
- Django视图函数函数之视图装饰器
FBV模式装饰器: 普通函数的装饰器(语法糖@) views.py from django.shortcuts import render def wrapper(f): def inner(*arg ...
- python3.x 基础三:set集合
集合,set(),记住: 1个特点:去重,把列表变成集合,达到自动去重操作,无序 5个关系:测试两个列表的交差并子反向差集 方法: | add(...) 常用,已存在元素去重不生效 | A ...
- 实验三 Java基本程序设计
第一部分:理论知识复习部分 第一章:第一章介绍的是Java程序设计的概述,通过两周的Java学习中,重温了Java“白皮书的关键术语,更深一步理解乐11个关键术语. 第二章:本章主要介绍如何安装JDK ...
- 为什么说OC是运行时语言?什么是动态类型、动态绑定、动态加载?
转载:https://www.cnblogs.com/dxb123456/p/5525343.html 动态: 主要是将数据类型的确定由编译时,推迟到了运行时. 这个问题其实浅涉及到两个概念,运行时和 ...
- Spring Boot在Docker上的部署
一.准备工作 1.1 安装Docker环境 Docker 给旧版本的WIN系统提供的是Docker Toolbox下载(https://docs.docker.com/toolbox/overview ...
- Create First Application
Node.js创建第一个应用 Node.js开发的目的就是为了用JavaScript编写Web服务器程序, 在使用Node.js时,不仅仅是在实现一个应用,同时还实现了整个HTTP服务器.在创建Nod ...
- WordPress 获取文章内容页特色图像地址
WordPress获取特色图像地址主要需要用到两个函数get_post_thumbnail_id和wp_get_attachment_image_src.下面是分别获取小.中.大.完整.指定图片规格的 ...
- JS 写逻辑判断,不要只知道用 if-else 和 switch
我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况.一般情况下,可以用 if/else 或 switch 来实现多个条件判断,但会出现一个问题:随着逻辑复杂度的增加,代码中的 if/else 和 ...
- 阿里P9精心编写高并发设计手册,来看大厂是如何进行系统设计
在看这篇文章的应该都是IT圈的朋友吧,不知道你们有没有考虑过这样几件事: 淘宝双11的剁手狂欢为什么天猫没崩掉? 为什么滴滴打车高峰如何滴滴依旧可以平稳运行? 为什么疫情期间,钉钉能支撑那么多人同时上 ...
- [PHP学习教程 - 心得]001.偷龙转凤技巧10则(Remember Tips)
引言:PHP当中的一些猬锁技巧,比较基础,想起就发贴总结一下,老鸟换个姿势飘过去就是. [技巧]应该属于“方法”的一个范畴,主要指对一种生活或工作方法的熟练和灵活运用.[五笔]RFAG. 话不多说,下 ...