十二、【VUE基础】列表渲染

已于 2022-10-09 21:44:43 修改
阅读量506 收藏 1
点赞数
分类专栏： Vue 简单回顾 文章标签： vue.js 前端 javascript
于 2022-07-31 22:39:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30769437/article/details/126091730
版权

十二、列表渲染

1、基本列表

1、v-for指令

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

2、CODE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<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) of xianka" :key="k">
					{{k}}-{{value}}
				</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>
	</body>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                persons:[
                    { id: '001', name: 'Mr.Wang', age: 18 },
                    { id: '002', name: 'Miss.Wang', age: 19 },
                    { id: '003', name: 'SomeOneElse', age: 20 }
                ],
                xianka:{
                    name: 'RTX3090',
                    price: '1.5w',
                    level: '999+'
                },
                str: 'hello'
            }
        })
    </script>
</html>

3、Result

在这里插入图片描述

2、key的原理

1、总结

  1. 虚拟DOM中key的作用
    1. key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
  2. 比较规则：
    1. 旧虚拟DOM中找到了与新虚拟DOM相同的key
      1. 若虚拟DOM中内容没变, 直接使用之前的真实DOM
      2. 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
    2. 旧虚拟DOM中未找到与新虚拟DOM相同的key
      1. 创建新的真实DOM，随后渲染到到页面
  3. 用index作为key可能会引发的问题
    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作
      1. 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
    2. 如果结构中还包含输入类的DOM
      1. 会产生错误DOM更新 ==> 界面有问题
  4. 开发中如何选择key？
    1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值
    2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的

2、CODE

1、用index当key可能会产生的问题
1、CODE（额外说明：不写key时Vue默认也会使用index当key）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<button @click.once="add">添加一个张先生</button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id: '001', name: 'Mr.Wang', age: 18},
						{id: '002', name: 'Miss.Wang', age: 19},
						{id: '003', name: 'SomeOneElse', age: 20}
					]
				},
				methods: {
					add(){
						const p = {id: '004', name: 'Mr.Zhang', age: 40}
						this.persons.unshift(p)
					}
				},
			})
		</script>
</html>
2、Result

在这里插入图片描述

说明：

其实也不能说事诡异一幕，内部原理就是Vue虚拟DOM的复用规则导致的

3、列表过滤 filter

1、CODE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<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>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                keyWord: '',
                persons: [
                    {id: '001', name: 'Miss.Wang', age: 19, sex:'女'},
                    {id: '002', name: 'Miss.Li', age: 20, sex:'女'},
                    {id: '003', name: 'Mr.Wang', age: 18, sex:'男'},
                    {id: '004', name: 'Mr.Li', age: 21, sex:'男'}
                ]
            },
            computed:{
                filPerons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        }) 
    </script>
</html>

2、Result

在这里插入图片描述

4、列表排序 sort

1、CODE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表排序</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<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}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				keyWord:'',
				sortType:0, //0原顺序 1降序 2升序
				persons:[
					{id: '001', name: 'Miss.Wang', age: 19, sex:'女'},
					{id: '002', name: 'Miss.Li', age: 20, sex:'女'},
					{id: '003', name: 'Mr.Wang', age: 18, sex:'男'},
					{id: '004', name: 'Mr.Li', age: 21, 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>
</html>

2、Result

在这里插入图片描述

5、更新时的问题

1、CODE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>更新时的一个问题</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<button @click="updateFir_each">更新第一人的信息Fun1</button><br/><br/>
			<button @click="updateFir_Obj">更新第一人的信息Fun2</button><br/><br/>
			<button @click="updateFir_splice">更新第一人的信息Fun3</button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					persons:[
						{id: '001', name: 'Miss.Wang', age: 19, sex:'女'},
						{id: '002', name: 'Miss.Li', age: 20, sex:'女'},
						{id: '003', name: 'Mr.Wang', age: 18, sex:'男'},
						{id: '004', name: 'Mr.Li', age: 21, sex:'男'}
					]
				},
				methods: {
					updateFir_each(){ //奏效
						this.persons[0].name = '小明'
						this.persons[0].age = 12
						this.persons[0].sex = '男'
					},
					updateFir_Obj(){ //不奏效
						this.persons[0] = {id: '001', name: '小明', age: 12, sex: '男'}
					},
					updateFir_splice(){
						this.persons.
                        	splice(0,
                                   1,
                                   {id: '001', name: '小明', age: 12, sex: '男'})
					}
				}
			}) 

		</script>
</html>

2、Result

在这里插入图片描述

6、Vue监测数据改变的原理(对象)

在这里插入图片描述

7、模拟数据监测

1、错误监测

1、CODE
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>错误数据监测</title>
	</head>
	<body>
		<script type="text/javascript" >

			let data = {
				name: 'Mr.Wang'
			}
			
			Object.defineProperty(data, 'name', {
				get(){
					return data.name
				},
				set(val){
					data.name = val
				}
			})

		</script>
	</body>
</html>
2、Result

在这里插入图片描述

3、错误原因

在这里插入图片描述

2、正确监测

1、CODE
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模拟数据监测</title>
	</head>
	<body>
		<script type="text/javascript" >
            
			let data = {
				name: 'Mr.Wang',
				age: 24,
			}

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obj = new Observer(data)		
			console.log(obj)

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obj

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((key)=>{
					Object.defineProperty(this, key, {
						get(){
							return obj[key]
						},
						set(val){
							console.log(`${key}被改了，开始解析模板，生成虚拟DOM...`)
							obj[key] = val
						}
					})
				})
			}
		</script>
	</body>
</html>
2、Result

在这里插入图片描述

8、Vue.set

1、CODE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue.set的使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学生信息</h1>
			<button @click.once="addSex">添加一个性别属性(默认男)</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el: '#root',
			data:{
				student: {
					name: 'Mr.Wang',
					age: {
						rAge: 24,
						sAge: 18,
					},
					friends: [
						{name: '旺财', age: 6},
						{name: '咪咪', age: 3}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

2、Result

在这里插入图片描述

9、Vue监测数据改变的原理(数组)

Vue是通过包装数组身上的常用修改数组的方法实现的，类似对象的监测，在调用修改方法之后调用模板检测实现动态更新

▼数组更新检测的7个方法

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

还可以使用Vue.set/vm.$set

10、Vue数据监视总结

1、Vue监视数据的原理：

  1. vue会监视data中所有层次的数据
  2. 如何监测对象中的数据？
    1. 通过setter实现监视，且要在new Vue时就传入要监测的数据
      1. 对象中后追加的属性，Vue默认不做响应式处理
      2. 如需给后添加的属性做响应式，请使用如下API：
        1. Vue.set(target，propertyName/index，value)
        2. vm.$set(target，propertyName/index，value)
  3. 如何监测数组中的数据？
    1. 通过包裹数组更新元素的方法实现，本质就是做了两件事：
      1. 调用原生对应的方法对数组进行更新
      2. 重新解析模板，进而更新页面
  4. 在Vue修改数组中的某个元素一定要用如下方法：
    1. 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2. Vue.set() 或 vm.$set()
  5. 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

2、CODE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
			<button @click="student.sex = '未知' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名：{{student.name}}</h3>
			<h3>年龄：{{student.age}}</h3>
			<h3 v-if="student.sex">性别：{{student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el: '#root',
			data:{
				student:{
					name: 'Mr.Wang',
					age: 18,
					hobby:['抽烟', '喝酒', '烫头'],
					friends:[
						{name: '旺财',age: 8},
						{name: '咪咪',age: 3}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>

3、Result

在这里插入图片描述

纯纯的小白
关注
专栏目录
25.Vue列表渲染
爱米酱的博客
07-04 517
这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序 实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属性就是给遍历的每一项加了一个特殊标识，虽然
Vue列表渲染——v-for
a814131847的博客
12-14 259
Vue列表渲染 v-for 渲染number类型数字 <ul> <li v-for = "(item,index) of num" :key = "index" > {{ item }} -- {{ index }}</li> </ul> 渲染string <ul> <li v-for ="(item,index) of ...
Vue之列表渲染
一叶之秋的博客
12-15 514
6、列表渲染 v-for：列表循环指令 例1：简单的列表渲染 <!-- 1、简单的列表渲染 --> <ul> <li v-for="n in 10">{{ n }} </li> </ul> <ul> <!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 --> <li v-for="(n, index) in 5">{{ n }} - {{ index
Vue入门-列表渲染
压缩疯雷的博客
10-19 807
列表渲染用 v-for 把一个数组对应为一组元素在 v-for 里使用对象维护状态数组更新检测替换数组注意事项显示过滤/排序后的结果在 v-for 里使用值范围在 上使用 v-for在组件上使用 v-for 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <ul id="example-1"> &
Vue 列表渲染
有多少艾克以重来的博客
11-17 465
列表渲染 <!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-width, initial-scale=1.0"> <title&g
vue列表渲染
qq_34400242的博客
04-15 215
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 使用方法 <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.m...
Vue的列表渲染
Flora's Zone
04-28 1071
Vue的列表渲染
Vue列表渲染的示例代码
10-17
本文将详细介绍如何在Vue中使用`v-for`指令进行列表渲染，并探讨相关注意事项。 `v-for`指令允许我们将数组中的每一项映射到一个组件元素。基本语法是`v-for="item in items"`，其中`items`是包含要渲染数据的数组...
详解key在Vue列表渲染时究竟起到了什么作用
12-12
在Vue2中，当涉及到列表渲染，即使用`v-for`指令遍历数组或对象时，Vue会推荐为每一个循环出来的元素提供一个唯一的`key`属性。`key`的作用至关重要，它与Vue的虚拟DOM（vDOM） diff算法密切相关，直接影响到DOM操作...
Vue基础--列表渲染
WikL116824的博客
07-14 152
Vue基础--列表渲染
Vue3基础——条件渲染、列表渲染、事件&事件修饰符、父子组件间的数据传递、生命周期钩子
weixin_45732235的博客
11-15 697
Vue3基础 复习笔记
万张图片，流畅体验——记一次 Vue 列表渲染
阿里云云栖号
12-17 2278
简介： ### 背景 团队目前的Web端产品中需要显示两个列表视图：卡片列表和条目列表，并且在点击切换按钮的时候，对两个列表进行切换显示。 ![条目列表](https://ata2-img.oss-cn-zh 背景 团队目前的Web端产品中需要显示两个列表视图：卡片列表和条目列表，并且在点击切换按钮的时候，对两个列表进行切换显示。 在开发完成进行简单性能测试时，发现列表数量达到数百条后，切换视图就会造成明显的页面卡顿，用户体验很差。于是着手进行性能优化。 第一次优化：解决已知问题 由于项目是使用
vue-列表渲染
qq_46606159的博客
03-21 265
v-for (特殊 v-for=“n in 10”) a. in b. of key： *跟踪每个节点的身份，从而重用和重新排序现有元素 *理想的 key 值是每项都有的且唯一的 id。data.id <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl...
Vue——列表渲染
王王仙贝的博客
03-26 659
利用v-for进行列表渲染，其中ｐ对persons数组进行遍历。:key="p.id"给每一个li定义一个特殊的标识符。 １、遍历数组： <body> <div id="root"> //ｗａｙ１ <ul> <li v-for="p in persons"　:key="p.id">{{p.name}}-{{p.age}}</li> </ul> //ｗａｙ２ <
Vue 中的列表渲染
最新发布
IT徐师兄
06-10 2273
在 Vue 中，列表渲染是非常常见的操作。它允许我们将一个数组中的数据渲染为一个列表，从而实现数据的展示和交互。在本文中，我们将探讨 Vue 中的列表渲染的基本原理和用法，并给出一些实例代码来帮助读者更好地理解。
Vue教程0207-Vue列表渲染
watchping的博客
02-11 337
Vue列表渲染
5.vue基础（四）条件渲染-列表渲染
qq_41634943的博客
04-22 2075
文章目录1.条件渲染、1.1 v-if1.2 v-show2.列表渲染2.1 遍历数组2.2 遍历对象2.3 key的原理2.3.1 向列表添加内容(push(),unshift())2.3.2 从列表删除内容(pop(),shift())2.3.3 添加对象案例2.4 列表过滤2.4.1 筛选数组元素(filter().indexOf())2.4.2 姓名筛选案例2.5 列表排序2.5.1 列表排序的函数(sort())2.5.2 根据年龄排序2.6 vue数据监测2.6.1 添加属性2.6.2 总结
Vue 3.0学习笔记之 列表渲染
wm201316的博客
02-03 420
Vue 3.0学习笔记之 列表渲染
Vue学习：Vue中的列表渲染相关知识点
qq_49916504的博客
06-10 238
Vue中列表渲染相关的知识点
Vue.js：列表渲染与组件详解
在Python和Vue.js中，列表渲染是一项基础但关键的功能，它允许开发者动态地将数据展示在用户界面。列表渲染主要依赖于Vue.js的`v-for`指令，这是一种用于遍历数组或对象的重要语法结构。 首先，对于数组的渲染，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纯纯的小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值