vue循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="demo">
<ol>
<li v-for="site in sites">
{{site.name}}
</li>
</ol>
</div>
<script>
new Vue({
el: '#demo',
data: {
sites:[
{name:"cyy1"},
{name:"cyy2"},
{name:"cyy3"}
]
},
methods:{
},
filters:{//过滤器
}
})
</script>
模板中使用 v-for：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="demo">
<ul>
<template v-for="site in sites">
<li>{{site.name}}</li>
<li>-----------</li>
</template>
</ul>
</div>
<script>
new Vue({
el: '#demo',
data: {
sites:[
{name:"cyy1"},
{name:"cyy2"},
{name:"cyy3"}
]
},
methods:{
},
filters:{//过滤器
}
})
</script>
v-for 可以通过一个对象的属性来迭代数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="demo">
<ul>
<li v-for="obj in object">
{{obj}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#demo',
data: {
object:{
name:"cyy1",
age:25,
sex:"girl"
}
},
methods:{
},
filters:{//过滤器
}
})
</script>
也可以提供第二个的参数为键名：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="demo">
<ul>
<li v-for="(obj,key) in object">
{{key}}:{{obj}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#demo',
data: {
object:{
name:"cyy1",
age:25,
sex:"girl"
}
},
methods:{
},
filters:{//过滤器
}
})
</script>
第三个参数为索引：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="demo">
<ul>
<li v-for="(obj,key,index) in object">
{{index}}.{{key}}:{{obj}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#demo',
data: {
object:{
name:"cyy1",
age:25,
sex:"girl"
}
},
methods:{
},
filters:{//过滤器
}
})
</script>
v-for 也可以循环整数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="demo">
<ul>
<li v-for="n in 10">
{{n}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#demo',
data: {
},
methods:{
},
filters:{//过滤器
}
})
</script>
vue循环语句的更多相关文章
- Vue.js：循环语句
ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
- vue.js循环语句
vue.js循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名. v-for 可以 ...
- 第十篇:vue.js for循环语句(大作业进行时)
Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...
- 【python之路4】循环语句之while
1.while 循环语句 #!/usr/bin/env python # -*- coding:utf-8 -*- import time bol = True while bol: print '1 ...
- python之最强王者（3）——变量，条件、循环语句
1.Python 变量类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的 ...
- #9.5课堂JS总结#循环语句、函数
一.循环语句 1.for循环 下面是 for 循环的语法: for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } 语句 1 在循环(代码块)开始前执行 语句 2 定义运行循环(代码块) ...
- 详解Python中的循环语句的用法
一.简介 Python的条件和循环语句,决定了程序的控制流程,体现结构的多样性.须重要理解,if.while.for以及与它们相搭配的 else. elif.break.continue和pass语句 ...
- 【java开发】分支语句、循环语句学习
一.Java分支语句类型 if-else 语句 switch 关于if-esle语句可以拆分为三种 if语句 if(条件){语句块;} if-else语句if(条件语句){语句块;} if-else ...
随机推荐
- typedef声明变量也是一种求值过程
前言: 什么叫做:声明变量是求值过程?请看下面的声明, int i; 很简单,声明了个整型变量i,再看如下声明, int *p; 也很简单,立刻反应出来它是指向整型的指针,但是具体如何推倒出来的呢?其 ...
- KMP——强大的next数组
\(KMP\) 的原理不在这里仔细讲了,主要说说最近刷题总结出的 \(next\) 数组的强大功能. 部分例题来自<信息学奥赛一本通>的配套练习. 基于定义--字符串相同前后缀 " ...
- 洛谷P3645 [APIO2015]雅加达的摩天楼
题目描述 印尼首都雅加达市有 N 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 0 到 N − 1.除了这 NN 座摩天楼外,雅加达市没有其他摩天楼. 有 M 只叫做 “doge” 的神 ...
- 生产者消费者代码学习，Producer_Consuner
使用BlockingQuery实现生产者者消费者:考虑并发,解耦. 生产者消费者模式是面向过程的设计模式. 生产者制造数据 ------> 生产者把数据放入缓冲区 -------> ...
- 创建模仿存储库 Making a Mock Repository 精通ASP-NET-MVC-5-弗瑞曼 Listing 7-5
- 个人第四次作业Alpha2版本测试
个人第四次作业Alpha2版本测试 这个作业属于哪个课程 软件工程 这个作业要求在哪里 作业要求 团队名称 GP工作室 这个作业的目标 对其他小组的项目进行测试 测试人员 陈杰 学号 20173102 ...
- 光流法draw_flow()函数报错
光流法draw_flow()函数报错 import cv2 from scipy import * def draw_flow(im, flow, step=16): ""&quo ...
- Shell常用命令之read
前言 Linux read命令用于从标准输入读取数值.read 内部命令被用来从标准输入读取单行数据.这个命令可以用来读取键盘输入,当使用重定向的时候,可以读取文件中的一行数据. 格式 read [- ...
- 运行MapReduce任务
1:运行MapReduce任务 1:原始数据准备 统计用户的登录次数: 源数据login_log.txt如下: 7whygb5m@linshiyouxiang.net nuahvuhuoia@qq.c ...
- .net core3.1 web api中使用newtonsoft替换掉默认的json序列化组件
在微软的文档中,有着较为详细的替换教程 https://docs.microsoft.com/zh-cn/aspnet/core/web-api/advanced/formatting?view=as ...