v-for

最新推荐文章于 2025-07-06 22:51:21 发布

原创最新推荐文章于 2025-07-06 22:51:21 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

v-for的列表渲染

one

<ul>
   <li v-for="(item,index) in list" > {{index}},{{item}} </li>
</ul>

vue:

new Vue({
				el: '#app',
				data: {
					list: ['html','css','js','jq'],
			})

效果：
在这里插入图片描述

two

<ul>
	<li v-for="item in user">{{item.name}}</li>
</ul>

vue:

new Vue({
				el: '#app',
				data: {
					user: [
						{
							name: 'tom',
							age: 10
						},
						{
							name: 'jack',
							age:20
						}
					],
			})

		效果：

在这里插入图片描述

three

<ul>
	<li v-for="(value,key) in person">{{key}},{{value}}</li>
</ul>

vue:

new Vue({
				el: '#app',
				data: {
					person: {
						name: 'Lily',
						age: 20,
						sex: '女'
					},
					link: {
						name: '百度',
						url: 'http://www.baidu.com'
					}
			})

效果：
在这里插入图片描述

four

<ul>
	<li v-for="item in 5">{{item}}</li>
</ul>

效果：
在这里插入图片描述