Vue.js:循环语句
ylbtech-Vue.js:循环语句 |
1.返回顶部 |
循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
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>
模板中使用 v-for:
v-for
<ul>
<template v-for="site in sites">
<li>{{ site.name }}</li>
<li>--------------</li>
</template>
</ul>
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据:
v-for
<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>
你也可以提供第二个的参数为键名:
v-for
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
第三个参数为索引:
v-for
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
v-for 迭代整数
v-for 也可以循环整数
v-for
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
2.返回顶部 |
3.返回顶部 |
<div id="app">
<ul>
<li v-for="n in [1,3,5]">
{{ n }}
</li>
</ul>
</div>
https://c.runoob.com/codedemo/4158
<div v-for="item in items" :key="item.id"> {{ item.text }}</div>
3、
不仅如此,在迭代属性输出的之前,v-for会对属性进行升序排序输出:
new Vue({
el: '#app',
data: {
object: {
2: '学的不仅是技术,更是梦想!',
1: '菜鸟教程',
0: 'http://www.runoob.com'
}
}
})
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
Vue.js:循环语句的更多相关文章
- vue.js循环语句
vue.js循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名. v-for 可以 ...
- Vue.js 循环语句
循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. v-for 指令: v-for 可以 ...
- Vue.js——循环(Java、JSTL标签库、数据库)
一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- js循环语句
1.for循环 for(语句1:语句2:语句3){ 代码块 } //语句1:初始化表达式; //语句2:条件表达式; //语句3:更新表达式; 2.for-in循环 for(x in object){ ...
- JS循环语句的理解
循环语句就是让程序重复性去做某些工作 最常见的就是for循环 那它的写法都有哪些呢? 1.必须要有初始值 2.要有条件判断 3.状态的改变 4.循环体 一定要控制循环多少次结束,否则就变成了死循环,消 ...
- Vue(三)--循环语句
v-for: v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. demo1. <!DOCTYPE html&g ...
- JS循环语句!
<1> for(1.初始值(初始值只有一次):2.判断条件:4.状态改变){ 3.执行语句: //如果判断条件为true,则进入死循环:不设执行语句浏览器会未响应: } <2> ...
- js循环语句while,do..while,for
1. while循环 while(循环条件){ 循环体语句块; } 2.do..while循环 do{ 循环体语句块; }while(循环条件) 两者区别:while先判断后执行.循环体语句可能一次都 ...
- JS循环语句作业讲解(折纸、兔子生兔子、买东西组合)
1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米: varn = 0;varg = 0.0001;while(){ g= g *2; n++ (g>8848bre ...
随机推荐
- pandas 数据处理
1. 查看数值数据的整体分布情况 datafram.describe() 输出: agecount 1463.000000mean 22.948052std 8.385384min 13.000000 ...
- centos下使用fdisk扩展分区容量大小
硬盘空间为20G,VMware增加磁盘大小,需要再增加10G空间 扩展完后,重启系统,再次使用fdisk -l查看,会发现硬盘空间变大了: 重新创建分区,调整分区信息 本次实验主要对/dev/sda4 ...
- easyui datagrid 行编辑功能
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: $('#tt').datag ...
- MongoCola使用教程 1 - MongoDB的基本操作和聚合功能---Mongdb客户端软件操作说明
前言 在开始正文之前,感谢博客园的Nosql爱好者对于MongoCola工具的试用(使用).特别感谢 呆呆 这位朋友的Bug报告,让我纠正了一个很严重的Bug.同时也感谢以前的多个网友在博客留言中给我 ...
- 自定义音频条形图--p52
package com.zzw.qunyingzhuan2; import android.content.Context; import android.graphics.Canvas; impor ...
- js区分字符串和数字,有时候需要将字符串转换成数字
js区分字符串和数字,有时候需要将字符串转换成数字 :parseInt
- 微信oauth2验证
微信公众号进行oauth2验证时的要求: 需要两个地方配置: (1) Oauth2验证链接中的appid.redirecturi (2) 微信公众号授权回调页面域名: Appid为公众号的ap ...
- Visual Studio 2008常见问题
1.asp.net在什么软件上运行?学习asp往往需要测试asp程序,电脑不能直接测试,需要装IIS才能运行,但装IIS要么需要安装盘,要么需要安装包,而且设置也很复搜索杂.这里给大学推荐两个替代II ...
- poscms用法总结(非定制开发,不涉及后台代码)
这些天几个企业站仿下来,对poscms的用法多少有些了解了,在这个记录一下,好记性不如烂笔头嘛. 1.静态文件目录和模板文件目录 这两个目录分别放置css/js/image等静态文件和html模板文件 ...
- iOS开发之最近开发遇到的问题总结
1.Cannot create __weak reference in file using manual reference counting 解决办法: 点击工程-------->Build ...