Vue 2x 系列之（十二）列表渲染

列表渲染

1. v-for指令

v-for指令:
		1.用于展示列表数据
		2.语法：v-for="(item, index) in xxx" :key="yyy"
		3.可遍历：数组（用的最多）、对象、字符串（用的很少）、指定次数（用的很少）

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 遍历数组 -->
		<h2>人员列表（遍历数组）</h2>
		<ul>
			<li v-for="(p,index) of persons" :key="index">
				{{p.name}}-{{p.age}}
			</li>
		</ul>

		<!-- 遍历对象 -->
		<h2>汽车信息（遍历对象）</h2>
		<ul>
			<li v-for="(value,k,index) of car" :key="k">
				{{k}}-{{value}}-{{index}}
			</li>
		</ul>

		<!-- 遍历字符串 -->
		<h2>测试遍历字符串（用得少）</h2>
		<ul>
			<li v-for="(char,index) of str" :key="index">
				{{char}}-{{index}}
			</li>
		</ul>
		
		<!-- 遍历指定次数 -->
		<h2>测试遍历指定次数（用得少）</h2>
		<ul>
			<li v-for="(number,index) of 5" :key="index">
				{{index}}-{{number}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				persons:[
					{id:'001',name:'张三',age:18},
					{id:'002',name:'李四',age:19},
					{id:'003',name:'王五',age:20}
				],
				car:{
					name:'奥迪A8',
					price:'70万',
					color:'黑色'
				},
				str:'hello'
			}
		})
	</script>
</body>

在Vue和React中，只要使用了遍历【v-for】去生成多个结构相同的数据，必须指定key，key就是每个结构的标识

指定key可以通过自己定义的id，也可以通过index，比如v-for='(person, index) in persons' :key='index'，只要保证每个结构的key不同即可

v-for用于实现遍历，加在谁身上，就能遍历谁，数组/对象/字符串的长度是多少，或者指定次数是几次，就会遍历多少次，生成对应个数的标签

注：undefined不会呈现在页面上，就是说页面上啥都不会显示

注：当接收多个值时，要用一个()将接收的值包起来，对于一些老的脚手架工具如果不这么写可能会报错

注：v-for中的in可以替换为of使用

注：v-for的优先级高于v-if，因此v-if中可以使用v-for中当前遍历到的元素

2. key的作用与原理

本节的几个问题：

  1. key的作用与原理
  2. 写key和不写key，Vue都是怎么处理的【如果不写key，Vue默认将index作为key】
  3. key的值用什么比较好，索引还是每一个数据的唯一标识

key可能有以下几种取值：

  • 不写，Vue默认将index作为key
  • index
  • 每一个数据的唯一标识

key并没有显示在DOM的节点上，key是Vue内部在用的

面试题：react、vue中的key有什么作用？（key的内部原理）
		
	1. 虚拟DOM中key的作用：
		key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
		随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
					
	2.对比规则（虚拟DOM对比算法【Diff算法，difference】:虚拟DOM对比算法就是为了实现真实DOM节点复用设计的）：
		(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
					①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
					②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

		(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
					创建新的真实DOM，随后渲染到到页面。
							
	3. 用index作为key可能会引发的问题：
		1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作【比如在列表头部插入一个新元素】:
						会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低【该复用的没复用，有的节点反而重新生成了】。

		2. 如果结构中还包含输入类的DOM：
						会产生错误DOM更新 ==> 界面有问题。

	4. 开发中如何选择key?:
		1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
		2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
			使用index作为key是没有问题的。

3. 列表过滤

根据输入的内容筛选出符合条件的数据展示出来

3.1 watch实现

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>人员列表</h2>
		<input type="text" placeholder="请输入名字" v-model="keyWord">
		<ul>
			<li v-for="(p,index) of filPerons" :key="index">
				{{p.name}}-{{p.age}}-{{p.sex}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//用watch实现
		new Vue({
			el:'#root',
			data:{
				keyWord:'',
				persons:[
					{id:'001',name:'马冬梅',age:19,sex:'女'},
					{id:'002',name:'周冬雨',age:20,sex:'女'},
					{id:'003',name:'周杰伦',age:21,sex:'男'},
					{id:'004',name:'温兆伦',age:22,sex:'男'}
				],
				filPerons:[]
			},
			watch:{
				keyWord:{
                  	  // 保证初始状态也会显示数据列表
					immediate:true,
					handler(val){
						this.filPerons = this.persons.filter((p)=>{
							return p.name.indexOf(val) !== -1
						})
					}
				}
			}
		}) 
	</script>
</body>

3.2 computed实现

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>人员列表</h2>
		<input type="text" placeholder="请输入名字" v-model="keyWord">
		<ul>
			<li v-for="(p,index) of filPerons" :key="index">
				{{p.name}}-{{p.age}}-{{p.sex}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//用computed实现
		new Vue({
			el:'#root',
			data:{
				keyWord:'',
				persons:[
					{id:'001',name:'马冬梅',age:19,sex:'女'},
					{id:'002',name:'周冬雨',age:20,sex:'女'},
					{id:'003',name:'周杰伦',age:21,sex:'男'},
					{id:'004',name:'温兆伦',age:22,sex:'男'}
				]
			},
			computed:{
				filPerons(){
					return this.persons.filter((p)=>{
						return p.name.indexOf(this.keyWord) !== -1
					})
				}
			}
		}) 
	</script>
</body>

4. 列表排序

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>人员列表</h2>
		<input type="text" placeholder="请输入名字" v-model="keyWord">
		<button @click="sortType = 2">年龄升序</button>
		<button @click="sortType = 1">年龄降序</button>
		<button @click="sortType = 0">原顺序</button>
		<ul>
			<li v-for="(p,index) of filPerons" :key="p.id">
				{{p.name}}-{{p.age}}-{{p.sex}}
				<input type="text">
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				keyWord:'',
				sortType:0, //0原顺序 1降序 2升序
				persons:[
					{id:'001',name:'马冬梅',age:30,sex:'女'},
					{id:'002',name:'周冬雨',age:31,sex:'女'},
					{id:'003',name:'周杰伦',age:18,sex:'男'},
					{id:'004',name:'温兆伦',age:19,sex:'男'}
				]
			},
			computed:{
				filPerons(){
					const arr = this.persons.filter((p)=>{
						return p.name.indexOf(this.keyWord) !== -1
					})
					//判断一下是否需要排序
					if(this.sortType){
						arr.sort((p1,p2)=>{
							return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
						})
					}
					return arr
				}
			}
		}) 

	</script>
<body>
posted @   刘二水  阅读(16)  评论(0)  编辑  收藏  举报
相关博文：
· Vue 2x 系列之（二十）一些注意点
· Vue 2x 系列之（十一）条件渲染
· 14-Vue核心-列表渲染
· vue基础知识和原理（二）
· Vue 列表渲染
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae