VUE循环语句

最新推荐文章于 2022-11-05 11:24:29 发布

teayear

最新推荐文章于 2022-11-05 11:24:29 发布

阅读量645

点赞数

分类专栏：前端技术道本自然文章标签： VUE v-for 迭代VUE

本文链接：https://blog.csdn.net/zhangchen124/article/details/85695233

版权

道本自然同时被 2 个专栏收录

743 篇文章 39 订阅

订阅专栏

前端技术

260 篇文章 18 订阅

订阅专栏

循环语句

循环使用 v-for 指令。

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

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

模板中使用 v-for：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-for循环语句</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<template  v-for="site in sites">
					<li>{{site.name}}</li>
					<li>-----</li>
				</template>
			</ul>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					sites:[
						{name:'张晨光'},
						{name:'张飞扬'},
						{name:'张枫霖'}]
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-for案例2</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="value in object">
					{{value}}
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					object:{
						name:'csdn.net',
						url:'http://www.csdn.net',
						slogan:'IT专业社区,技术成就梦想'
					}
				}
			})
		</script>
	</body>
</html>

提供key，value的参数

提供key,value,index三个参数：

v-for 也可以循环整数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-for迭代整数</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<!--布局-->
		<div id="app">
			<ol>
				<li v-for="n in 10">{{n}}</li>
			</ol>
		</div>
		<!--js-->
		<script>
			new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>

迭代数组：

teayear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE循环语句

循环语句循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：模板中使用 v-for：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="U...
复制链接

扫一扫