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 ...
随机推荐
- Codeforces Choosing Laptop 题解
这题实在是太水了,具体看注释 蒟蒻的方法是一边找过时的电脑一边比大小 蒟蒻不才,只会C++ 其实还会free basic,但它已经过时了 附: 本题洛谷网址 Codeforces网址 希望蒟蒻的题解能 ...
- ubuntu文件操作mkdir cp mv rm ln
pwd:显示当前目录 date:显示当前日期 cal:显示日历 ls:列出目录内容 cd:改变当前工作目录 ‘.’:代表工作目录 ‘..’:代表工作目录父目录 进入当前目录的父目录:cd /home ...
- qsort 函数笔记
函数声明 void qsort(void *base, size_t nitems, size_t size, int (*compare)(const void *, const void*)); ...
- Canny边缘检测算法（基于OpenCV的Java实现）
目录 Canny边缘检测算法(基于OpenCV的Java实现) 绪论 Canny边缘检测算法的发展历史 Canny边缘检测算法的处理流程 用高斯滤波器平滑图像 彩色RGB图像转换为灰度图像 一维,二维 ...
- selenium，测试套件的使用
学习 selenium-webdriver 已经一段时间了,最近学习到,测试用例的批量执行,和测试套件的使用,有点自己的理解,不晓得对不对,希望大家指正! 写一个测试用例 baidu.py c ...
- Centos与Ubuntu
共同点 1.两个系统都分别有桌面系统与服务器系统,不过ubuntu的桌面从外观上来看要比centos的漂亮 不同点 1.centos中新建的普通用户是没有sudo权限的,如果想让普通用户拥有sudo权 ...
- excle 写入数据库
龙龙博客:https://www.cnblogs.com/meilong/p/cao-zuoexcel-mo-kuaiopenpyxl.html 1 安装 pip install openpyxl 如 ...
- ios---photo实现保存图片到自定义相册
#import "XMGSeeBigPictureViewController.h" #import "XMGTopic.h" #import <SVPr ...
- Linux下安装nvidia显卡驱动
部署环境 操作系统:Centos 7.4 在线源:Centos 7.4镜像源 安装操作 1.安装系统插件 [root@localhost ~]# yum -y install gcc kernel-d ...
- JDK源码之String类解析
一 概述 String由final修饰,是不可变类,即String对象也是不可变对象.这意味着当修改一个String对象的内容时,JVM不会改变原来的对象,而是生成一个新的String对象 主要考虑以 ...