VUE 学习（三）循环语句v-for

最新推荐文章于 2024-05-28 23:40:22 发布

豆皮没有豆

最新推荐文章于 2024-05-28 23:40:22 发布

阅读量359

点赞数 1

分类专栏： HTML+CSS+SVG+VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_43434300/article/details/108232981

版权

HTML+CSS+SVG+VUE 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VUE学习-（v-for）</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="div1">
			<ol type="a">
				<li v-for="item in states">
					{{item.name}}
				</li>
			</ol>
			<!--template 模板中使用v-for-->
			<ul>
				<template>
					<li v-for="item in array">
						{{item}}
					</li>
				</template>
			</ul>
			<!--v-for 可以通过一个对象的属性来迭代数据：-->
			<ul>
				<li v-for="item in person">
					{{item}}	
				</li>
			</ul>
			<!--你也可以提供第二个的参数为键名：-->
			<ul>
				<li v-for="(value,key) in person">
					{{key}}:{{value}}
				</li>
			</ul>
			<!--第三个参数为索引：-->
			<ul>
				<li v-for="(value,key,index) in person">
					{{index}}:{{key}}:{{value}}
				</li>
			</ul>
			<!--v-for 也可以循环整数-->
			<ul>
				<li v-for="n in 10">
					{{n}}
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:'#div1',
				data:{
					states:[
					{name:'张三'},
					{name:'李四'},
					{name:'王五'},
					{name:'赵六'}
					],
					array:[
					'L','O','V','E'
					],
					person:{
						username:'zhaosan',
						name:'张三',
						qq:'2136494821',
						email:'2136494821@qq.com',
						location:'陕西省西安市雁塔区'
					}
				}
			})
			
		</script>
	</body>
</html>

执行效果：

豆皮没有豆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE 学习（三）循环语句v-for

循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：例：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>VUE学习-（v-for）</title> <script src=
复制链接

扫一扫