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 ...
随机推荐
- typescript step by step
如果有本 typescript的书 这个名字不错 啊 step one
- KALI美化-设置CONKY开机启动
简介 Conky 是一个应用于桌面环境的系统监视软件,可以在桌面上监控系统运行状态.网络状态等一系列参数 https://github.com/brndnmtthws/conky/ 详细配置文档:ht ...
- 一文带你了解 HTTP 黑科技
这是 HTTP 系列的第三篇文章,此篇文章为 HTTP 的进阶文章. 在前面两篇文章中我们讲述了 HTTP 的入门,HTTP 所有常用标头的概述,这篇文章我们来聊一下 HTTP 的一些 黑科技. HT ...
- Android的学习之路一
在Android的道路上越走越远==,本着一颗童心去学习,没想到最后会成为自己的职业.看到过知乎上写的,并不是兴趣使比尔盖茨以及乔布斯他们成就斐然,而是他们真正的牛逼使得即使买大饼也能成为世界首富.然 ...
- 04--Java--使用eclipse创建开发java项目步骤
eclipse创建开发java步骤 1.三种创建java项目 1)方式一:在包资源管理器(package explorer)窗口中鼠标右击任意位置选择New --> Java Project,如 ...
- CSS-09-背景属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 基于Flask框架搭建视频网站的学习日志（二）
基于Flask框架搭建视频网站的学习日志(二)2020/02/02 一.初始化 所有的Flask程序都必须创建一个程序实例,程序实例是Flask类的对象 from flask import Flask ...
- Nacos 配置MySQL8.0持久化
问题描述 官网下载的Nacos mysql由于驱动过低只支持5.X版本,使用8.X版本的mysql时无法正常启动 解决办法 克隆nacos源码(branch 1.0.0-RC3) master等分支也 ...
- 【存储类、链接、存储管理】分配内存：malloc()、free()
一.使用库函数:malloc()分配管理内存 (一)标识符(Identifier) 1. 定义变量时,使用了诸如 a.abc.mn123 这样的名字,它们都是程序员自己起的,一般能够表达出变量的作用, ...
- 实验14：VLAN间的路由
实验11-1: 单臂路由实现VLAN 间路由 Ø 实验目的通过本实验,读者可以掌握如下技能:(1) 路由器以太网接口上的子接口(2) 单臂路由实现VLAN 间路由的配置Ø 实验拓扑 实验步 ...