Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）
文章目录
1、基本列表
1.1 基本知识
v-for指令:
- 1、用于展示列表数据
- 2、语法：v-for=“(item, index) in xxx” :key=“yyy”（key是唯一的）
- 3、可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
1.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>学生列表(遍历数组)</h1>
<ul>
<li v-for="(s,index) of Students" :key="index">
{{s.name}}-{{s.age}}
</li>
</ul>
<h1>汽车信息(遍历对象)</h1>
<ul>
<li v-for="(c,index) of Car" :key="index">
{{index}}--{{c}}
</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 //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue",
Students: [
{ id: '001', name: '张三', age: 18 },
{ id: '002', name: '李四', age: 19 },
{ id: '003', name: '王五', age: 20 }
],
Car: {
name: '宝马',
price: '80万',
color: '白色'
},
str: "hello"
}
})
</script>
</body>
</html>
1.3 测试效果
2、key的原理
2.1基本知识
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是没有问题的。
2.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
v-for指令:
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy"（key是唯一的）
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
-->
<div id="App">
<h1>学生列表(遍历数组)</h1>
<button @click.once="add">添加一个老白</button>
<ul>
<li v-for="(s,index) of Students" :key="index">
{{s.name}}-{{s.age}}
<input type="text">
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
new Vue({
el: '#App',
data: {
Students: [
{ id: '001', name: '张三', age: 18 },
{ id: '002', name: '李四', age: 19 },
{ id: '003', name: '王五', age: 20 }
]
},
methods: {
add() {
const s = { id: '004', name: '老刘', age: 40 }
this.Students.unshift(s)
}
},
})
</script>
</body>
</html>
2.3 测试效果
2.4 原理图解
3、列表过滤
3.1 代码实例
<!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>
3.2 实现的效果
提示：再次输入查找信息、会从原有的数组中进行查找过滤。不是在当前已经经过过滤的数据中进行查找。有代码可知
3.3 补充知识
Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）的更多相关文章
- vue学习之路 - 3.基本操作（中）
基本操作(中) 本章节主要介绍:vue的条件渲染.列表渲染,计算属性和侦听器 条件渲染和列表渲染 条件渲染主要使用到了 v-if 指令,列表渲染主要使用了 v-for 指令. 下面介绍 v-if . ...
- Oracle基础学习（二）v$session中Command的数字含义
v$session中Command的数字含义. 1 CREATE TABLE 2 INSERT 3 SELECT 4 CREATE CLUSTER 5 ALTER CLUSTER 6 UPDATE 7 ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】（2022/8/30）
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- Vue学习笔记之vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
- 每天一点点之vue框架开发 - 数据渲染-for循环中动态设置页面背景色
实现方式很简单,在属性前加:,表示绑定 :style="{'background':item.bgColor} 代码样例: <li v-for="item in laber_ ...
- Vue学习之--------事件的基本使用、事件修饰符、键盘事件（2022/7/7）
文章目录 1.事件处理 1.1. 事件的基本使用 1.1.1 .基础知识 1.1.2. 代码实例 1.1.3.测试效果 1.2.事件修饰符 1.2.1. 基础知识 1.2.2 .代码实例 1.2.3 ...
- 3-7 Vue中的列表渲染
举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
随机推荐
- 【原创】Python 极验滑块验证
本文仅供学习交流使用,如侵立删! 记一次 极验滑块验证分析并通过 操作环境 win10 . mac Python3.9 selenium.seleniumwire 分析 最近在做的一个项目登录时会触发 ...
- 【面试题】为什么有时用Vue.use()？及Vue.use()的作用及原理是什么？
Vue.use()的作用及原理 点击打开视频讲解 在Vue中引入使用第三方库通常我们都会采用import的形式引入进来 但是有的组件在引入之后又做了Vue.use()操作 有的组件引入进来又进行了Vu ...
- P2501 [HAOI2006]数字序列 （LIS，DP）（未完成）
第二问好迷... #include "Head.cpp" #include <vector> const int N = 35007; vector<int> ...
- 054_末晨曦Vue技术_处理边界情况之组件之间的循环引用
组件之间的循环引用 点击打开视频讲解更详细 假设你需要构建一个文件目录树,像访达或资源管理器那样的.你可能有一个 <tree-folder> 组件,模板是这样的: <p> &l ...
- idea主类main左侧栏启动按钮消失原因
今天在开发完一个小项目后,打开idea发现我的springboot项目的启动类左侧栏的按钮消失了,然后我又去看了看mapp等文件的调转也全部消失了,我就很纳闷是不是idea配置坏了,赶忙点击导航栏的按 ...
- 内网技巧-通过SAM数据库获得本地用户hash的方法
内网技巧-通过SAM数据库获得本地用户hash的方法 在windows上的C:\Windows\System32\config目录保存着当前用户的密码hash.我们可以使用相关手段获取该hash. 提 ...
- RabbitMQ 入门系列：9、扩展内容：死信队列：真不适合当延时队列。
系列目录 RabbitMQ 入门系列:1.MQ的应用场景的选择与RabbitMQ安装. RabbitMQ 入门系列:2.基础含义:链接.通道.队列.交换机. RabbitMQ 入门系列:3.基础含义: ...
- 第五十八篇：webpack的Source Map
好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...
- 在Apache Cassandra数据库软件中报告高严重性RCE安全漏洞
研究人员披露了ApacheCassandra一个现已修补的高严重性安全漏洞的细节,如果这个漏洞得不到解决,可能会被滥用来获取受影响安装的远程代码执行(RCE). DevOps公司JFrog的安全研究员 ...
- KingbaseES 如何开启并进入数据库
关键字: KingbaseES.sys_ctl.ksql 一.数据库启动前环境检测 1.1 查看kingbase用户环境变量配置 图1-1 查看.bashrc环境变量配置 1.2 应用环境变量 [ki ...