vue列表渲染,以及尽量添加一个惟一的key属性

最新推荐文章于 2023-01-10 18:41:19 发布

俗世凡人行

最新推荐文章于 2023-01-10 18:41:19 发布

阅读量978

点赞数

分类专栏： Vue 文章标签： key属性列表渲染

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107591527

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

列表渲染`v-for`

v-for指令基于一个数字来渲染一个列表; v-for指令需要使用item in/of items形式的特殊语法, 其中items是源数据数组, 而item则是被迭代的数组元素的别名;
数据格式

Array | Object | number | string | lterable
<p v-for="n in 5">{{n}}</p>
<p v-for="value,index,key in article">{{key}}==={{index}}==={{value}}</p>
article:{
    title:'学习vue',
    content:'可以的,好好学',
    qq:123321
}

特殊的属性 key number|string

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue列表渲染</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 输出1到10 -->
			<!-- <ul>				
				<li v-for="n in 10">{{n}}</li>
			</ul> -->
			<!-- <p v-for="value in article">{{value}}</p> -->
			<!-- 打印索引 -->
			<!-- <p v-for="value,index in article">{{index}}===={{value}}</p> -->
			<!-- 循环对象 -->
			<!-- <p v-for="(value,index) in article">{{index}}===={{value}}</p> -->
			<!-- 循环数组 -->
			<!-- <p v-for="value in user">{{value}}</p>
			<p v-for="value,index in user">{{value}}==={{index}}</p> -->
			<!-- 有数组和对象的循环,以及演示惟一的属性key,一般提供index就可以,,对我们感觉不出来,但对vue是否好处的,
			 以后用 这样的循环,尽可能加一个key的属性,key要有的唯一性-->
			<p v-for="value,index in users" :key="index">{{value.name}}==={{value.age}}==={{index}}</p>
			
		
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{	
			article:{
				title:'hello title',
				content:'hello content',
			},
			user:['张三','李四','小王'],
			users:[
				{name:'小明0',age:13},
				{name:'小明1',age:23},
				{name:'小明2',age:33},
				{name:'小明3',age:43}
			],
							
							
		},
		methods:{			
			
		}
	})	
	
</script>