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 ...
随机推荐
- C语言实现按位拷贝
在程序开发过程中,我们经常会用到按位拷贝一串二进制数,在此提供一个按位拷贝的函数给大家参考,函数源码如下: #define char_t char #define uint8_t unsigned c ...
- java异步调用方法
一.利用多线程 直接new线程 Thread t = new Thread(){ @Override public void run() { longTimeMethod(); } }; 使用线程池 ...
- makefile自动依赖生成
自动依赖生成 基于make的构建环境要正确工作, 一个很重要(也很烦人)的任务是, 在makefile中正确列 举依赖. 这个文档将介绍了一个非常有用的让make自身来创建和维护这些依赖的方法. 文章 ...
- mysql--->profile使用
Mysql分析-profile详解 简介 Profiling是从 mysql5.0.3版本以后才开放的. 启动profile之后,所有查询包括错误的语句都会记录在内. 此工具可用来查询SQL执行状态, ...
- Git详解之初次运行
配置文件 一般在新的系统上,我们都需要先配置下自己的 Git 工作环境.配置工作只需一次,以后升级时还会沿用现在的配置.当然,如果需要,你随时可以用相同的命令修改已有的配置. Git 提供了一个叫做 ...
- laravel 服务容器的由来 代码展示
<?php /** * 目的:代码的完善来说明从 基础类的调用到 工厂类的使用 再到容器的出现的原因 * (首先要明白工厂类和容器的关系 可以理解:容器就是工厂类的升级版(为了解决类的依赖)) ...
- java正则使用全记录!
一 开坑! 场景: 将动态uri中{} 替换成 至少出现一次的任意字符进行匹配, 比如 loclahost:8080/{name}/{9527} -> localhost:8080/.{1,} ...
- Leetcode 题目整理-6 Swap Nodes in Pairs & Remove Duplicates from Sorted Array
24. Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...
- Leetcode | 刷题日记(1)
本文记录个人刷题记录 推荐两个刷题网站: 地址:https://leetcode.com/ 另外一个地址:http://www.lintcode.com/ 1.Write a SQL query to ...
- JQuery--JQuery面向对象编程快速入门-插件开发
JQuery源码片段分析 (function(window){ /** * jQuery是一个函数 是一个对象 是一个构造器函数 */ var jQuery = function( selector, ...