学做网站多少钱/seo外链网
目录
一、key的作用原理
二、实现列表遍历并对在列表最前方进行追加元素
三、实现列表过滤搜索
1、用computed计算属性来实现
2、用watch监听输入值的变化来实现
四、按年龄排序输出列表
一、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是没有问题的。
二、实现列表遍历并对在列表最前方进行追加元素
追加采用unshift函数，在最前面追加，若此时的key='index'，因为有输入类DOM更新则会产生错误，所以应给其特定的id。若用push在最后方追加，则key=‘index’不存在问题
代码部分
<div id="root"><h4>一、人员遍历</h4><button @click="add">添加一个老刘</button><!-- 让每一位人都有一个 自己特定的id --><ul><li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}<input type="text"></li></ul></div><script text="text/javascript">new Vue({el:"#root",data:{persons:[{id:'001',name:'张三',age:'21'},{id:'002',name:'李四',age:'20'},{id:'003',name:'王五',age:'22'},]},methods: {add(){const s={id:'004',name:'老刘',age:20}// 追加数据，在前面追加this.persons.unshift(s)}},})</script>三、实现列表过滤搜索
1、用computed计算属性来实现
将filter过滤器得到的结果返回给新的对象，遍历新的对象实现搜索功能
<body><div id="root"><h4>一、人员遍历</h4><input type="text" v-model="keyword"><ul><li v-for="person in filterpersons" :key="persons.id">{{person.name}}-{{person.age}}--{{person.sex}}</li></ul></div><script text="text/javascript">// 用计算属性实现new Vue({el:"#root",data:{keyword:'',persons:[{id:'001',name:'马冬梅',age:'21',sex:'女'},{id:'002',name:'周杰伦',age:'20',sex:'男'},{id:'003',name:'周冬雨',age:'22',sex:'女'},{id:'004',name:'周天气',age:'24',sex:'男'},{id:'005',name:'马万里',age:'23',sex:'男'},],},computed:{// 计算属性的值为其返回的值，其默认是一开始就加载filterpersons(){return this.persons.filter((person)=>{// 找不到返回的就是-1，找到的话是正常的下标return person.name.indexOf(this.keyword)!==-1})}}})
2、用watch监听输入值的变化来实现
将computed部分替换为watch
watch:{keyword:{immediate:true,其val相当于keyword新的值handler(val){this.filterpersons=this.persons.filter((person)=>{return person.name.indexOf(val)!==-1})}}
}四、按年龄排序输出列表
在搜索的基础上对年龄进行升序、降序输出调用sort函数
代码部分
new Vue({el:"#root",//0原序，1升序，2降序data:{keyword:'',sortType:0,persons:[{id:'001',name:'马冬梅',age:'21',sex:'女'},{id:'002',name:'周杰伦',age:'20',sex:'男'},{id:'003',name:'周冬雨',age:'22',sex:'女'},{id:'004',name:'周天气',age:'24',sex:'男'},{id:'005',name:'马万里',age:'23',sex:'男'},],},computed:{filterpersons(){const arr= this.persons.filter((person)=>{return person.name.indexOf(this.keyword)!==-1})// 需要判断其是否需要排序if(this.sortType){arr.sort((p1,p2)=>{return this.sortType===1?p1.age-p2.age:p2.age-p1.age})}return arr},}})相关文章：
key的作用原理与列表的遍历、追加、搜索、排序
目录 一、key的作用原理 二、实现列表遍历并对在列表最前方进行追加元素 三、实现列表过滤搜索 1、用computed计算属性来实现 2、用watch监听输入值的变化来实现 四、按年龄排序输出列表 一、key的作用原理 1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识&a…...
SQL性能优化的47个小技巧，你了解多少？
收录于热门专栏Java基础教程系列（进阶篇） 1、先了解MySQL的执行过程 了解了MySQL的执行过程，我们才知道如何进行sql优化。 客户端发送一条查询语句到服务器；服务器先查询缓存，如果命中缓存，则立即返回存…...
DPDK — 数据加速方案的核心思想
目录 文章目录 目录DPDK 数据加速方案1、使用用户态协议栈来代替内核协议栈Linux UIO FrameworkDPDK UIO Framework2、使用轮训来代替中断Kernelspace igb_uio DriverUserspace PMD3、使用多核编程代替多线程无锁环队列：CPU 核间无锁通信DPDK 数据加速方案...
[python入门㊽] - 自定义异常 raise 关键字
目录 ❤ 自定义抛出异常关键字 - raise ❤ 使用raise主动引发异常 ❤ raise 关键字的用法 ❤ 触发异常 ❤ 自定义异常类 在前面我们学过异常三个关键字分别是try、except 以及 finally 在编程过程中合理的使用异常可以使得程序正常的执行。有直接抛出异常的形式&…...
DDOS攻击
注：本博客只是为了自己的学习，记录自己的学习，请勿用于其他途径、1、winR-->cmd2、ping 网站3、替换IP1 import java.io.BufferedInputStream;2 import java.io.IOException;3 import java.net.MalformedURLException;4 import java.net.U…...
网络编程套接字
文章目录1. socket编程接口1-1 socket 常见API1-2 sockaddr结构2. 简单的UDP网络程序2-1 日志（固定用法：标准部分自定义部分）2-2 服务器代码实现1. 框架2. 初始化服务器3. 服务器运行4. 调用服务器封装函数（UdpServer）…...
海量数据相似数据查询方法
1、海量文本常见 海量文本场景，如何寻找一个doc的topn相似doc，一般存在2个问题， 1)、两两对比时间o(n^2) 2)、高维向量比较比较耗时。 文本集可以看成(doc,word)稀疏矩阵，一般常见的方法是构建到排索引，然后进行归并…...
Codeforces Round #822 (Div. 2)
A(签到) - Select Three Sticks 题意： 给你一个长度为 n 的正整数序列，你可以操作任意次，每一次操作可以选择任意一个元素，把它 1 或者 - 1，问最少多少次操作可以使得序列中存在三个相同的数字以构成一个等边三角形.…...
华为OD机试 - 最短木板长度（JS）
最短木板长度 题目 小明有 n n n块木板，第 i i i(1≤ i i </...
java设计模式——观察者模式
概述 定义:又被称为发布-订阅(Publish/Subscribe)模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。 结构 在观察者模式…...
linux高级命令之线程的注意点
线程的注意点学习目标能够说出线程的注意点1. 线程的注意点介绍线程之间执行是无序的主线程会等待所有的子线程执行结束再结束线程之间共享全局变量线程之间共享全局变量数据出现错误问题2. 线程之间执行是无序的import threading import timedeftask():time.sleep(1)print(&qu…...
MyBatisPlus ---- 多数据源
MyBatisPlus ---- 多数据源1. 创建数据库及表2. 引入依赖3. 配置多数据源4. 创建用户service5. 创建商品service6. 测试适用于多种场景：纯粹多库、读写分离、一主多从、混合模式等 目前我们就来模拟一个纯粹多库的一个场景，其他场景类似 场景说明&#x…...
Java多线程
目录1 多线程1.1 进程1.2 线程1.3 多线程的实现方式1.3.1 方式1：继承Tread类1.3.2 方式2：实现Runnable接口1.3.3 方式3：实现Callable接口1.4 设置和获取线程名称1.5 线程调度1.6 线程控制1.7 线程生命周期1.8 数据安全问题之案例：…...
linux高级命令之线程执行带有参数的任务
线程执行带有参数的任务学习目标能够写出线程执行带有参数的任务1. 线程执行带有参数的任务的介绍前面我们使用线程执行的任务是没有参数的，假如我们使用线程执行的任务带有参数，如何给函数传参呢?Thread类执行任务并给任务传参数有两种方式:args 表示以…...
管理会计报告和财务报告的区别
财务会计报告是给投资人看的，可以反映公司总体的盈利能力。不过，我们回顾一下前面“第一天”里面提到的问题。如果你是公司的产品经理，目前有三个产品在你的管辖范围内。上级给你一笔新的资金，这笔资金应该投到哪个产品上…...
华为OD机试 - 最左侧冗余覆盖子串（Python） | 机试题算法思路 【2023】
最近更新的博客 华为OD机试 - 自动曝光（Python） | 机试题算法思路 【2023】 华为OD机试 - 双十一（Python） | 机试题算法思路 【2023】 华为OD机试 - 删除最少字符（Python） | 机试题算法思路 【2023-02】 华为OD机试 - Excel 单元格数值统计（Python） | 机试题算法思路 …...
【Opencv 系列】第1章 图像基础
通过本套课程,可以学到: 1.opencv的基本操作 2.两个案例,目标追踪&人脸识别 对重点内容,我会提示,包括我再准备这套课程过程中遇到的坑点! 最后代码我会放到git上,章节顺序一致:https://github.com/justinge/opencv_tutorial.git 系列文章目录 第1章 Opencv 图像基础 和 …...
创建和销毁对象——遇到多个构造器参数时要考虑使用构建器
静态工厂和构造器有个共同的局限性：它们都不能很好地扩展到大量的可选参数。比如用一个类表示包装食品外面显示的营养成分标签。这些标签中有几个域是必需的：每份的含量、每罐的含量以及每份的卡路里。还有超过20个的可选域：总脂肪量、饱和脂…...
【c++学习】入门c++（中）
目录一. 前言二. 函数重载1. 概念2.函数名修饰规则三 .引用（&）1. 概念2. 引用特性3.应用1.做参数2. 做返回值3. 传值、传引用效率比较4.引用和指针的区别四 . 结语一. 前言 小伙伴们大家好，今天我们继续学习c入门知识，今天的…...
论文阅读_AlphaGo_Zero
论文信息 name_en: Mastering the game of Go without human knowledge name_ch: 在没有人类知识的情况下掌握围棋游戏 paper_addr: http://www.nature.com/articles/nature24270 doi: 10.1038/nature24270 date_publish: 2017-10-01 tags: [‘深度学习’,‘强化学习’] if: 6…...
一文教你用Python创建自己的装饰器
python装饰器在平常的python编程中用到的还是很多的，在本篇文章中我们先来介绍一下python中最常使用的staticmethod装饰器的使用。 目录一、staticmethod二、自定义装饰器python类实现装饰器python函数嵌套实现装饰器多个装饰器调用三、带参数的装饰器一、staticmet…...
华为OD机试 - 任务总执行时长（JS）
任务总执行时长 题目 任务编排服务负责对任务进行组合调度。参与编排的任务又两种类型，其中一种执行时长为taskA，另一种执行时长为taskB。任务一旦开始执行不能被打断，且任务可连续执行。服务每次可以编排num个任务。 请编写一个方法，生成每次编排后的任务所有可能的总执…...
pytorch离线快速安装
1.pytorch官网查看cuda版本对应的torch和torchvisionde 版本(ncvv -V，nvidia-sim查看cuda对应的版本) 2.离线下载对应版本，网址https://download.pytorch.org/whl/torch_stable.html 我下载的： cu113/torch-1.12.0%2Bcu113-cp37-cp37m-win_…...
华为OD机试 - 数组合并（JS）
数组合并 题目 现在有多组整数数组,需要将他们合并成一个新的数组。 合并规则,从每个数组里按顺序取出固定长度的内容合并到新的数组中, 取完的内容会删除掉, 如果该行不足固定长度或者已经为空, 则直接取出剩余部分的内容放到新的数组中,继续下一行。 如样例1,获得长度3,先遍…...
不要让GPT成为你通向“学业作弊”的捷径——使用GPT检测工具来帮助你保持正确的方向
不要让GPT成为你通向“学业作弊”的捷径——使用GPT检测工具来帮助你保持正确的方向 最近，多所美国高校以及香港大学等都明确禁止在校使用ChatGPT等智能文本生成工具。GPT（Generative Pre-trained Transformer）是一种自然语言处理技术&#x…...
基于matlab的斜视模式下SAR建模
一、前言此示例说明如何使用线性 FM （LFM） 波形对基于聚光灯的合成孔径雷达 （SAR） 系统进行建模。在斜视模式下，SAR平台根据需要从宽侧斜视一定角度向前或向后看。斜视模式有助于对位于当前雷达平台位置前面的区域进行…...
15-基础加强-1-类加载器反射
文章目录1.类加载器1.1类加载器【理解】1.2类加载的过程【理解】1.3类加载的分类【理解】1.4双亲委派模型【理解】1.5ClassLoader 中的两个方法【应用】2.反射2.1反射的概述【理解】2.2获取Class类对象的三种方式【应用】 第1步：获取类的Class对象2.3反射获取构造方…...
基于SSM,Spring, BootStrap 毕业设计管理系统的设计与实现
目录 一.前言介绍 二、主要技术 2.1 SSM框架介绍 2.2 MYSQL数据库 2.3 持久层框架MyBatis 2.4 前端框架BootStrap 三. 系统设计 3.1 系统架构设计 3.2 系统功能模块 3.2.1 学生模块 3.2.2 教师模块 3.2.3 管理员模块 四、数据库设计 4.1 数据分析 4.2 概念设计 …...
一招鉴别真假ChatGPT，并简要介绍ChatGPT、GPT、GPT2和GPT3模型之间的区别和联系
以下内容除红色字体部分之外，其他均来源于ChatGPT自动撰写。 ChatGPT是基于GPT模型的对话生成模型，旨在通过对话模拟实现自然语言交互。它是为了改善人机对话体验而设计的，主要应用于聊天机器人、智能客服等场景。 与GPT模型相比，…...
华为OD机试 - 特异性双端队列（JS）
特异性双端队列 题目 有一个特异性的双端队列，该队列可以从头部到尾部添加数据，但是只能从头部移除数据。 小A一次执行 2n 个指令往队列中添加数据和移除数据， 其中 n 个指令是添加数据(可能从头部也可以从尾部添加) 依次添加 1 到 n , n 个指令是移出数据 现在要求移除数…...