Vue(5)

最新推荐文章于 2024-02-02 09:18:21 发布
最新推荐文章于 2024-02-02 09:18:21 发布
阅读量201 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52774518/article/details/126210346
版权

列表渲染

基本列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="/02_Vue模板语法/vue.js"></script>
	</head>
	<body>
		<!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
		<!-- 准备好一个容器-->
		<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="/02_Vue模板语法/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>

在这里插入图片描述

在这里插入图片描述

3.列表过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="/02_Vue模板语法/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="/02_Vue模板语法/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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码学自尚硅谷学堂

女孩哪有代码香
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-起步（5）
多一点开心
09-27 120
Vue-起步（5）一、简单的组件间传值二·、代码 一、简单的组件间传值 上一节学习了父组件向子组件传值，这一节学习子组件向父组件传值，实现点击文字删除对应文字 点击文字“想”，这个字就被删除掉了 二·、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TodoList</title> <script src="./vue.js"&gt
key的原理（vue）
qq_52135740的博客
07-27 587
面试题：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中未找到
【Vue 快速入门系列】列表的基本使用
一个非常Cool的人
10-25 2569
本篇文章讲述Vue中最基本的列表使用，如何迭代列表取值，如何对列表进行过滤、排序等。文章中每一个案例都有详细的代码与注释。
Vue--列表
是吃货不是贝爷的博客
05-24 3316
v-forv-for v-for v-for事实上跟for循环的逻辑类似，遍历数组、对象、字符串、固定数值，遍历所给的参数也是不一样的 数组=(obj, index) 对象=(value, key) 字符串=(char, index) 固定数值(number, index) <div id="testBox"> <ul> <!--这里in变成of也可以--> <!--遍历数组--> <li v
Vue中 key的作用与原理
weixin_51735748的博客
08-07 2171
你真的了解Vue中的key吗？
vue中的key有什么作用（key原理）
qq_44741577的博客
02-02 441
若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新，界面没有问题，但是效率低。如果结构中还包含输入类的DOM（如input输入框）:会产生错误DOM更新=>界面有问题。
用vue写的h5商城
11-15
用vue写的h5商城, 包括框架生成等资源。有实用价值的代码.
vue3 实现 H5 砸金蛋 中大奖
07-06
vue实现的h5砸金蛋，h5移动端小游戏 - 砸金蛋，代码简洁，注释明确，内容完整，特别容易读懂，简易上手！如需定制抽奖，直接看个人资料，联系我。
vue2+webpack搭建h5框架
03-12
vue2+webpack搭建h5框架
vue写h5页面的方法总结
10-17
在本篇内容里小编给大家整理了关于vue写h5页面的方法以及注意点分析，有需要的朋友们跟着学习下吧。
vueh5plus:适用于Vue.js的H5Plus扩展
05-15
vue-h5-plusH5Plus Extend for Vue.js加入了babel-polyfill安装npm install vue-h5-plus基本使用import Vue from 'vue'import plus from 'vue-h5-plus'Vue.use(plus)组件选项其方法中的this指向组件- load选项在组件...
Vue实战：获取数据列表展示
若水弹丸之地
02-25 1万+
这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。 一、展示 二、源码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta nam
Vue中的列表展示常见的遍历方式（模板）
荣山的博客
06-23 2595
/ Vue.config.productionTip= false //阻止Vue 在启动时生成生产提示。el: '#root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。{ id: '001', name: '张三', age: 18 },{ id: '002', name: '李四', age: 19 },{ id: '003', name: '王五', age: 18 }-- 1.遍历数组 --><h2>人员列表</h2><h2>汽车信息</h2>
Vue---列表渲染
gaoqiandr的博客
05-12 2143
本文主要介绍Vue中的列表渲染的基本用法
Vue中key的作用及原理
热门推荐
cun的博客
10-11 2万+
在vue中key的作用是什么？实现原理是什么？如果不写会怎么样？
Vue----任务列表案例
m0_67394002的博客
05-15 567
案例完整文件 Vue----任务列表案例 文章目录 1. 案例效果 2. 用到的知识点 3. 整体实现步骤 4. 初始化项目 5. 梳理项目结构 6. 封装 todo-list 组件 6.1 创建并注册 TodoList 组件 6.2 基于 bootstrap 渲染列表组件 6.3 为 TodoList 声明 props 属性 6.4 渲染列表的 DOM 结构 7. 封装 todo-input 组件 7.1 创建并注册 TodoInput 组件 7.2 基于 bootstrap 渲染组.
Vue 中的列表渲染
IT徐师兄
06-10 2159
在 Vue 中，列表渲染是非常常见的操作。它允许我们将一个数组中的数据渲染为一个列表，从而实现数据的展示和交互。在本文中，我们将探讨 Vue 中的列表渲染的基本原理和用法，并给出一些实例代码来帮助读者更好地理解。
【Vue】第四部分 列表（渲染、排序、过滤）
Trees__的博客
02-23 509
#【Vue】第四部分 列表（渲染、排序、过滤） 文章目录4. 列表（渲染、排序、过滤）4.1 条件渲染指令4.1.1 v-show4.1.2 v-if4.1.3 v-if和v-show的小案例4.1.4 v-for（key的原理）4.2 列表过滤4.3 列表排序总结 4. 列表（渲染、排序、过滤） 4.1 条件渲染指令 有个小技巧： ​ 如果是查找对象中不存在的属性，返回的是一个undefined，利用这一个点不管是v-show或者是v-if，如果值等于undefined的就不显示，假设sex
v-for Vue列表渲染&列表过滤（使用计算属性、监视属性实现简单的搜索功能）&列表排序
weixin_55772633的博客
07-10 3099
使用 v-for 遍历对象，可以获取到三个参数，第一个参数为当前项的值（value），第二个参数为当前项对应的键（key），第三个参数为当前项的索引（index）。使用 v-for 遍历数组，可以获取到两个参数，第一个参数为当前正在遍历的数组的对象，第二个参数为当前数组的对象对应的索引（从0开始）。使用 v-for 遍历字符串，可以获取到两个参数，第一个参数为当前正在遍历的字符，第二个参数为当前字符对应的索引（从0开始）。items 是待循环的数据。item 是当前的循环项。
vue2 移动端h5
最新发布
03-16
5. 添加交互：通过Vue的指令和事件绑定等方式为应用添加交互功能，例如点击事件、表单验证等。 6. 添加路由：使用Vue Router库来实现页面之间的跳转和路由管理，可以通过配置路由表来定义不同路径对应的组件。 7. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值