前端vue学习曲线（10）列表渲染

最新推荐文章于 2023-08-23 11:04:40 发布

菜鸟_zhengke

最新推荐文章于 2023-08-23 11:04:40 发布

阅读量137

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42014192/article/details/98612107

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

v-for

v-for=“别名 in 源数据数组”

索引：第二个参数，即当前项的索引

例子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app1">
			<h2>v-for 遍历一组元素</h2>
			<ul>
				<li v-for="item in items">
					{{ item.message }}
				</li>
			</ul>
			<h2>index索引</h2>
			<ul>
				<li v-for="(item,index) of items" :key="index">
					{{parentMessage}} - {{index}} - {{ item.message }}
				</li>
			</ul>
			<h3>of 等价 in</h3>
			<h2>在 v-for 遍历一个对象的属性</h2>
			<ul>
				<li v-for="value in object">
					{{value}}
				</li>
			</ul>
			<ul>
				<h3>第一个参数为值，第二个参数为键名，第三个参数为索引</h3>
				<li v-for="(value,key,index) in object">
					{{index}} - {{ key }}: {{ value }}
				</li>
			</ul>
		</div>
		<div id="app2">
			<ul>
				<li v-for="n in evenNumbers">{{ n }}</li>
			</ul>
			<ul>
				<li v-for="n in 10">{{ n }}</li>
			</ul>

			<ul>
				<template v-for="n in 5">
					<li>{{ n }}</li>
					<li class="divider" role="presentation"></li>
				</template>
			</ul>
		</div>
	</body>

</html>
<script>
	var app1 = new Vue({
		el: "#app1",
		data: {
			parentMessage: 'Parent',
			items: [{
				message: 'Foo'
			}, {
				message: 'Bar'
			}],
			object: {
				name: '名字',
				sex: '性别',
				age: "年龄"
			}
		}
	})
	var app2 = new Vue({
		el: "#app2",
		data: {
			numbers: [1, 2, 3, 4, 5]
		},
		computed: {
			evenNumbers: function() {
				return this.numbers.filter(function(number) {
					return number % 2 === 0
				})
			}
		}
	})
</script>

菜鸟_zhengke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端vue学习曲线（10）列表渲染

v-forv-for=“别名 in 源数据数组”索引：第二个参数，即当前项的索引例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdeliv...
复制链接

扫一扫

专栏目录