【Vue核心】12.列表渲染

最新推荐文章于 2024-05-20 17:02:17 发布
最新推荐文章于 2024-05-20 17:02:17 发布
阅读量533 收藏
点赞数
分类专栏： # 【Vue教程】 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beiluoL/article/details/128305314
版权

列表显示指令

  • 数组: v-for / index
  • 对象: v-for / key

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

<!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 car" :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>

		<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>
</html>

key的内部原理

面试题：react、vue中的key有什么作用？（key的内部原理）

1.虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：

(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是没有问题的。

<!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:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'赵六',age:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>
</html>

列表的高级处理

vue中修改数组的方法

在vue中修改数组的方法有：

1.push()函数，向数组尾部添加元素；

2.unshift()函数，向数组头部添加元素；

3.pop()函数，从数组尾部删除元素；

4.shift()函数，从数组头部删除元素；

在vue中修改数组的方法有以下几种

例数组结构如下：

var list = [3,4,5,6]

1.使用push()函数向数组尾部添加元素

list.push(7,8)list=[3,4,5,6,7,8]

2.使用unshift()函数向数组头部添加元素

list.unshift(1,2)  list=[1,2,3,4,5,6]

3.使用pop()函数从数组尾部删除一个元素

list.pop() list=[3,4,5]

4.使用shift()函数从数组头部删除一个元素

list.shift()   list=[4,5,6]

列表的更新显示

Vue.set() 和 vm.$set()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="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:{
				school:{
					name:'测试',
					address:'sz',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

列表过滤

<!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>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* 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
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用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>
</html>

列表排序

<!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}}
					<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>
</html>

Vue监视数据的原理：

原理

  1. vue会监视data中所有层次的数据。

  2. 如何监测对象中的数据？
    通过setter实现监视，且要在new Vue时就传入要监测的数据。
    (1).对象中后追加的属性，Vue默认不做响应式处理
    (2).如需给后添加的属性做响应式，请使用如下API：
    Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)

  3. 如何监测数组中的数据？
    通过包裹数组更新元素的方法实现，本质就是做了两件事：
    (1).调用原生对应的方法对数组进行更新。
    (2).重新解析模板，进而更新页面。

  4. 在Vue修改数组中的某个元素一定要用如下方法：
    (1). 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    (2). Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

模拟一个数据监测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >

			let data = {
				name:'測試',
				address:'深圳',
			}

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

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

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


		</script>
	</body>
</html>
我有满天星辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue】splice、shift 、pop、unshift、push、reverse、sort、slice、concat、join、indexOf等常用方法
weixin_55774776的博客
07-11 1904
删除数组的最后一个元素，返回被删除的元素；如果数组为空，则返回undefined；let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']console.log(newArr) //['大', '家', '都', '是', '靓', '仔', '靓', '女']
Vue面试资源 难度：中等
11-17
一、Vue面经文档 题目类型：Vue面试资源 难度：中等 覆盖范围：Vue基础知识、Vue组件通信、Vue路由、Vuex等。 1. 请简要介绍一下Vue的核心概念和特点。 2. Vue的生命周期钩子有哪些？它们分别在什么时候执行？ 3. 请解释一下Vue中的计算属性和侦听属性的区别。 4. 如何在Vue中实现条件渲染？ 5. 请简要介绍一下Vue中的事件处理。 6. 如何在Vue中实现列表渲染？ 7. 请解释一下Vue中的表单双向绑定。 8. 如何在Vue中实现插槽（slot）？ 9. 请简要介绍一下Vue中的自定义指令。 10. 如何在Vue中实现过渡（transition）和动画？ 11. 请简要介绍一下Vue中的过滤器（filter）。 12. 如何在Vue中实现混入（mixin）？ 13. 请简要介绍一下Vue中的异步组件。 14. 如何在Vue中实现懒加载（lazy loading）？ 15. 请简要介绍一下Vue中的路由器（router）和导航守卫。 16. 如何在Vue中实现状态管理（state management）？ 17. 请简要介绍一下Vue中的服务器端渲染
详解vuejs之v-for列表渲染
12-29
Vue.js是一个构建数据驱动的web界面的库。重点集中在MVVM模式的ViewModel层，因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单 如下列表展示，当我们从后端接口或者json文件使用ajax获取数据之后现实到页面，我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一、html <div class=shop_list_box> <ul> <li><span>蚌埠</span><span>凤阳东路</span>
使用 Vue 实现一个虚拟列表的方法
01-19
因为 DOM 性能瓶颈，大型列表存在难以克服的性能问题。 因此，就有了 “局部渲染” 的优化方案，这就是虚拟列表的核心思想。 虚拟列表的实现，需要重点关注的问题一有以下几点： 可视区域的计算方法 可视区域的 DOM 更新方案 事件的处理方案 下面逐一分解说明。 可视区域计算 可视区域的计算，就是使用当前视口的高度、当前滚动条滚过的距离，得到一个可视区域的坐标区间。 算出可视区域的坐标区间之后，在去过滤出落在该区间内的列表项，这个过程，列表项的坐标也是必须能算出的。 思考以下情况， 我们的视口高度为 100px 我们当前已经滚动了 100px 我们的列表项，每一项高度为
谈谈常见的vue面试题
03-29
下面是常见的vue面试题（此列表并非全部面试题，仅供参考）： 1. 什么是Vue.js？Vue.js的优点是什么？ 2. 你了解Vue.js的响应式原理吗？说说你的理解。 3. Vue.js中组件的生命周期钩子函数有哪些？它们的执行顺序是什么样的？ 4. 你有使用过Vuex吗？它的核心概念是什么？ 5. Vue.js中的路由是什么？Vue-Router是什么？路由有什么用途？ 6. 什么是Vue-cli？它的作用是什么？ 7. 了解什么是Virtual DOM吗？Vue.js中使用了哪种Virtual DOM？ 8. 你在Vue.js项目中使用过哪些第三方库或插件？可以举例说明吗？ 9. 如何实现Vue.js组件之间的通信？说说你的思路。 10. 你了解Vue.js的服务端渲染(SSR)吗？可以简单叙述一下其实现原理吗？ 以上是一些常见的Vue.js面试题，但面试中可能会有更细致的考察，要充分准备。
Vue学习中的知识点积累
weixin_63473024的博客
03-17 850
this.list = [...results, ...this.list]; // 等同与 this.list.unshift(...results); //很多的场景中 使用 this.list = [...results, ...this.list];的方法会造成添加死循环 //尝试使用 this.list.unshift(...results); 报错立马消失, 父子通信的props 如果是一个 数组，我们只要不重新赋值这个props里面的数组，就都不算修改props，而可以实现父..
js中数组的增删改方法
lintengz的博客
11-26 808
push方法(向数组末尾添加一个或多个元素) list.push(1,2,3,4) pop方法( 删除数组中的最后一个元素) list.pop() shift方法( 删除数组中的第一个元素) list.shift() 当数组为空时,shift方法不进行任何操作,返回undefined值 unshift方法( 往数组的开头添加一个或多个元素) list.unshift(123,456)...
【Vue】向集合的头部添加元素
做最好的自己
04-20 3583
在 Vue 中，如果要向集合的头部添加元素，可以使用 JavaScript 的unshift方法或 Vue 的$set方法。unshift$set其中，list是要添加元素的集合，newElement是要添加的新元素，0是要添加元素的索引位置。需要注意的是，如果要向 Vue 的响应式集合中添加新元素，建议使用$set方法或splice方法来通知 Vue 进行更新，而不是手动使用push或unshift等方法，否则新元素可能不会被响应式地更新到视图上。
vue之push() pop() shift() unshift() splice() sort() reverse()等等
m0_46426259的博客
12-16 1万+
一、变更方法 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 let arr = ['a', 'b', 'c', 'd'] console.log(arr) // ["a", "b", "c", "d"] console.log(arr.push('new')) //6 console.log(arr) // ["a", "b", "c", "d", "new"] 1234 pop() 方法数组最后一位元素
vue 项目中 向数组 添加元素 的方式
热门推荐
YHLSunshine的博客
04-21 1万+
vue 项目中 向数组 添加元素 的方式 及合并数组的方法
Vue小笔记.docx
08-21
Vue是一种流行的前端JavaScript框架，用于构建交互性强、动态和响应式的Web应用程序。它的核心思想是通过将视图与数据分离，使开发者能够更轻松地管理和维护复杂的用户界面。 Vue具有以下主要特点： 响应式数据绑定： Vue使用双向绑定技术，允许开发者将页面中的HTML元素与数据模型关联。当数据模型发生变化时，相关的视图会自动更新，从而减少了手动DOM操作的需求。 组件化开发： Vue鼓励将应用程序拆分为多个可复用的组件。每个组件都有自己的逻辑、模板和样式，使开发者能够更高效地管理和组织代码。 虚拟DOM： Vue使用虚拟DOM来优化性能。在数据变化时，Vue首先更新虚拟DOM，然后通过比较虚拟DOM和实际DOM的差异，最终只更新需要改变的部分，从而减少了DOM操作的开销。 指令： Vue提供了一系列指令，用于处理DOM元素。例如，v-if用于条件性地渲染元素，v-for用于循环渲染列表，v-bind用于绑定属性等。 事件处理： Vue允许开发者使用v-on指令来监听DOM事件并执行相应的逻辑。这使得用户交互和事件处理变得简单而直观。 过渡与动画： Vue提供了过渡
Vue.js，作为一个流行的前端JavaScript框架，以其独特的优势在前端开发领域占据了一席之地 以下是对Vue.js开发的
05-02
Vue.js，作为一个流行的...这些指令使开发者可以在模板中轻松地执行各种操作，如条件渲染、列表渲染和绑定属性等。 路由管理：Vue.js有一个名为VueRouter的官方路由管理库，用于处理单页面应用程序(SPA)的导航。通过V
js如何实现列表数据的上移和下移？以及置顶、置底功能
weixin_52099241的博客
06-21 3099
首先，调用list.splice(index - 1, 1, list[index])方法，这个方法会从list数组中删除第index-1个元素，并用第index个元素替换它。这个方法的作用是将list数组中的第index个元素和第index-1个元素交换位置，也就是将第index个元素上移一位。这个方法的作用是将list数组中的第index个元素和第index+1个元素交换位置，也就是将第index个元素下移一位。使用splice方法实现下移的原理和上移类似，只是要将当前位置的元素和下一位的元素交换。
Vue-数组中的响应式方法-push pop shift unshift splice sort resourse
ICanWin_lll的博客
01-18 2767
一、vue中数组中的响应式的方法 push pop shift unshift splice sort resourse 1.push() 数组尾添加一个元素 letters: ['a', 'b', 'c', 'd'] this.letters.push('aaa') this.letters.push('aaaa', 'bbbb', 'cccc') letters:['a', 'b', 'c', 'd','aaaa','bbbb','cccc'] 2.pop() 删除数组中的最后一个元素
Vue数组变更方法和替换方法
munangs的博客
08-10 3223
Vue数组变更方法和替换方法：filter() concat() slice() push() pop() shift() unshift() splice() sort() reverse()
关于小程序开发中使用到unshift向头部追加数据问题
有一个程序员的博客
08-20 1002
下面举例是向数组对象追加记录 1、从数据库获取回来的一组数据 let list = app.globalData.list // 要追加的数据 let data ={_id:"0",addr:"--",status:0,name:"--"} // 使用unshift从数组头部追加数据 list.unshift(data) // 重新使用追加后的数组 list ...
js list删除指定元素_vue.js
weixin_39545017的博客
11-25 2000
vue.js 中M V MV代表哪一部分 <插值表达式（v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show ）<body> <div id="app"> <!-- 使用 v-cloak 能够解决 插值表达式闪烁（在网络不好的...
Vue数组更新相关方法和过滤与排序的使用
weixin_46019681的博客
04-03 1504
Vue将被监听的数组进行了包裹，他们会触发视图更新，被包裹的方法包括：push(),pop(),shift(),unshift(),splice(),sort(),reverse(). 顺便提一下用于过滤数据的方法filter() 1.push() 向数组末尾添加任意数量数据，并返回修改后数组的长度。有两种方式： eg1：通过v-on指令，绑定add方法，在add方法里使用push() eg2. 直接在标签里调用push方法 result： eg3. 在控制台添..
vite+ts+mock+vue-router+pinia实现vue的路由权限
最新发布
beekim的博客
05-20 281
vite.config.ts配置。
vue.js 2.5 手册
07-29
此外，手册还解释了如何使用Vue的指令来实现条件渲染、列表渲染和表单处理等常见场景。 在手册中，开发人员还可以了解Vue组件的创建和使用方法，包括局部注册和全局注册。手册还介绍了组件之间的通信方式，包括父子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值