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 ...
随机推荐
- RocketMQ 实战之快速入门
原文地址:https://www.jianshu.com/p/824066d70da8 最近 RocketMQ 刚刚上生产环境,闲暇之时在这里做一些分享,主要目的是让初学者能快速上手RocketMQ. ...
- 每天玩转3分钟 MyBatis-Plus - 4. 高级查询（二）（条件构造器）
每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一) 每天玩转 ...
- CTRL_IKun团队项目总结
1. 团队项目-总结 这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求 团队名称 CTRP-lkun 这个作业的目标 团队项目总结,每个人的收获和感悟 Github地址 Github 2. ...
- ThreeJS 物理材质shader源码分析(顶点着色器)
再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ ThreeJS 物理材质shader源码分析(顶点着色器) Threejs将shader代码分为ShaderLib ...
- C语言的安装及使用
安装 vc6.0 使用方法 new --- win32 Console Application --- ok-ok ------c++ Source File ------ ...
- Nginx-负载均衡实现解读
负载均衡在服务端开发中算是一个比较重要的特性.因为Nginx除了作为常规的Web服务器外,还会被大规模的用于反向代理前端,因为Nginx的异步框架可以处理很大的并发请求,把这些并发请求hold住之后就 ...
- H5 + WebGL 展示的3D无人机
前言 近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,也被称为“会飞的照相机”.但作为军事使用,无人机的各项性能要求更加严格.重要.本系统则是通过 Hightopo 的 ...
- 什么是 Trait
Trait 是从 PHP 5.4 加入的一种细粒度代码复用的语法.以下是官方手册对 Trait 的描述: Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制.Trait 为了减少单继承 ...
- springIOC源码接口分析(七):ApplicationEventPublisher
一 定义方法 此接口主要是封装事件发布功能的接口,定义了两个方法: /** * 通知应用所有已注册且匹配的监听器此ApplicationEvent */ default void publishEve ...
- 第三次作业：使用Packet Tracer分析TCP连接的建立与释放过程
0 个人信息 张樱姿 201821121038 计算1812 1 实验目的 使用路由器连接不同的网络 使用命令行操作路由器 通过抓取HTTP报文,分析TCP连接建立的过程 2 实验内容 使用Packe ...