Vue的嵌套循环

最新推荐文章于 2023-07-12 14:42:35 发布

JAVA道人

最新推荐文章于 2023-07-12 14:42:35 发布

阅读量2.3k

点赞数 1

分类专栏： # vue

本文链接：https://blog.csdn.net/dmw412724/article/details/93929225

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个简单的vue的双重for循环,

<html>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<body>
	<div id = "app">
		<li v-for="s in list">
			<span v-for="(value,key) in s">
				{{key}}:{{value}}
			</span>
		</li>
	
	</div>
</body>
<script >
	var v = new Vue({
		el:'#app',
		data:{
			list:[{
					ac:1,
					bc:2
				},{
					ac:3,
					bc:4
				}
			]
		}
	})
</script>
</html>

其中要注意:

1.外部循环的s in list 的list是vue.data.list的数据

in是关键字 s 是遍历出的每个元素

2.内部循环的 value,key) in s,这个s就是外部循环的那个每个元素.

我们可以看到它的参数变成了两个,一个是value,一个是key

其实in 前面都有两个参数,如果写一个的话,默认只是value值.如果s是对象类型的,第二个参数是键,如果s是数组类型的,第二个参数是下标index

优惠劵

JAVA道人

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue的嵌套循环

这是一个简单的vue的双重for循环,<html><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><body> <div id = "app"> <li v-for="s in list"> <spa...
复制链接

扫一扫