Vue中循环遍历与key值原理详解

最新推荐文章于 2024-07-04 09:54:33 发布

Ednburgh-

最新推荐文章于 2024-07-04 09:54:33 发布

阅读量2.3k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71345904/article/details/126128178

版权

1，v-for遍历数组

1.1代码展示案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 v-for="(item,index) in letters" :key="index">{
  {item}}--{
  {index}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						letters: ['a', 'b', 'c', 'd', 'e']
					}
				}

			})
		</script>
	</body>
</html>

1.2，循环遍历常用方法

（1）原生for循环

（2）for in

（3）for of

（4）arr.map()加工处理

（5）arr.reduce()缩减。累加

(6) arr.filter();数组筛选过滤

（7）arr.some（）找符合条件元素，返回布尔值。

（8）forEach

2，循环对象

2.1代码展示案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-