Vue数组变更方法和替换方法
一、可以引起UI界面变化
Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
push()pop()shift()unshift()splice()sort()reverse()
以上七个数组都会改变原数组,下面来分别讲解它们的区别:
var list = [3,4,5,6]
1. push() 向数组的尾部添加若干元素,并返回数组的新长度;
list.push(7,8) //返回数组的长度6
list //list=[3,4,5,6,7,8]
2. pop() 从数组的尾部删除一个元素(删且只删除一个元素),返回被删除的元素
list.pop() //返回删除的数组6
list //list=[3,4,5]
3. unshift() 向数组的头部添加若干元素,返回数组的新长度
list.unshift(1,2) //返回数组的长度6
list //list=[1,2,3,4,5,6]
4. shift() 从数组的头部删除一个元素(删且只删除一个元素),返回被删除的元素
list.shift() //返回删除的元素3
list //list=[4,5,6]
ps:
- pop()和shift()方法不接受传参,传参了也没有什么用
- 空数组可以删除,不报错,但返回undefined
5. splice() 该方法有如下3种用法:
- 删除 —— 可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除项的项数。
- 插入 —— 可以向指定位置插入任意数量的项,只需要提供3个参数:插入起始位置、0(要删除的项数)和要插入的项。 如果要插入多个项,可以再传入第四、第五,一直任意多个项。
- 替换 —— 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需要指定3个指定参数:起始位置、要删除的项数和要插入的任意数量项。 插入的项数是不必与删除的项数相等。
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); //删除第一项
alert(colors); //green,blue
alert(removed); //red,返回数组中值包含一项removed = colors.splice(1, 0, "yellow", "orange"); //从位置1开始插入两项
alert(colors); //green,yellow,organge,blue
alert(removed); //返回的是一个空数组removed = colors.splice(1, 1, "red", "purple"); //插入两项,删除一项
alert(colors); //green,red,purple,orange,blue
alert(remove); //yellow, 返回的数组中只包含一项
6. sort() 该方法用于对数组的元素进行排序
list:["George","John","Thomas","James","Adrew","Martin"];
list.sort(); //["Adrew", "George", "James", "John", "Martin", "Thomas"]
ps: 因为sort()排序默认的是根据字符串UniCode码进行排序,所以如果要对数字进行排序的话,参数要传递一个比较函数
list:["100","24","489","22","307","6"];
sortNumber(a,b){return a-b
};
list.sort(sortNumber) //["6", "22", "24", "100", "307", "489"]
7. reverse() 该方法用于颠倒数组中元素的顺序
list:["kwz","John","Thomas","James","Adrew","Martin"]
list.reverse(); //["Martin", "Adrew", "James", "Thomas", "John", "kwz"]
二、不能引起UI界面变化
filter()concat()slice()
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
<div id="app"><div><button @click="retain">保留非数字</button></div><ul><li v-for="(item,index) in list" :key="index">{{item}}</li></ul><hr><div><h2>通过filter过滤得到的新数组中的内容是:</h2><ol><li v-for="(value,index) in newList" :key="index">{{value}}</li></ol></div>
</div>
<script src="./js/vue.js"></script><script>var vm=new Vue({//模板选择器el:'#app',//数据中心data(){return{list:[10,'apple',50,'orange',9,32,'banana',19,22,50],newList:[]}},methods:{retain(){this.newList=this.list.filter(function(item){console.log(typeof item=='string');return typeof item=='string'})}}})</script>
效果

concat() 方法用于连接两个或多个数组,类似于java中字符拼接操作

slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组
<div id="app"><div><button @click="_slice">点击截取</button></div><ul><li v-for="(item,index) in list" :key="index">{{item}}</li></ul>
</div>
<script src="./js/vue.js"></script><script>var vm=new Vue({//模板选择器el:'#app',//数据中心data(){return{list:['apple','orange','banana','pear','watermelon'],}},methods:{_slice(){//this.list : 'banana','pear'this.list=this.list.slice(2,4)}}})</script>
如果要替换方法要实现UI界面改变,则this.list=this.list.slice(2,4)通过这种赋值操作进行
相关文章:
Vue数组变更方法和替换方法
一、可以引起UI界面变化 Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括: push()pop()shift()unshift()splice()sort()reverse() 以上七个数组都会改变原数组,下面来分别讲解它们的区别&…...
Centos-6.3安装使用MongoDB
安装说明 系统环境:Centos-6.3 安装软件:mongodb-linux-x86_64-2.2.2.tgz 下载地址:http://www.mongodb.org/downloads 安装机器:192.168.15.237 上传位置:/usr/local/ 软件安装位置:/usr/local/mongodb 数…...
Mysql 复杂查询丨联表查询
💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! JOIN(联表查询) 联表查询(Join)是一种在数据库中使用多个表进行关联查询的操作。它通过使用 JOIN 关键字将多个表连接在…...
C语言进阶第二课-----------指针的进阶----------升级版
作者前言 🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂 🎂 作者介绍: 🎂🎂 🎂 🎉🎉🎉…...
若依vue -【 111 ~ 更 ~ 127 完 】
【更】111 3.5.0版本更新介绍 112 使用docker实现一键部署 1、安装docker yum install https://download.docker.com/linux/fedora/30/x86_64/stable/Packages/containerd.io-1.2.6-3.3.fc30.x86_64.rpm yum install -y yum-utils device-mapper-persistent-data lvm2 yum-c…...
vue-pc端实现按钮防抖处理-自定义指令
前言 我们经常在移动端会处理按钮和输入框的防抖和节流处理,在pc端很少进行这样的操作 但是在pc端也是可以进行按钮的防抖操作,这样也是比较合理,可以不用但不可以不会 我们只要配合vue项目自定义指令加上全局注册,就可以实现按…...
python解决8皇后问题
def is_valid(queens, row, col):for i in range(row):if queens[i] == col or abs(queens[i] - col) == abs(i - row):return Falsereturn Truedef solve_n_queens(n, row, queens, result):if row == n:result.append(queens[:]) # 将当前解添加到结果中returnfor col in ra…...
xcode打包导出ipa
转载:xcode打包导出ipa 目录 转载:xcode打包导出ipa 第一步:注册苹果开发者账号 第二步:下载APP Uploader 第三步:使用xcode打包导出ipa文件,供其他人内测 众所周知,在开发苹果应用时需要使…...
更优雅地调试SwiftUI—借助LLDB
更优雅地调试SwiftUI—借助LLDB 概述 你是否写过这样的代码: struct ContentView: View {@State private var mySize: CGFloat = 15.0var myString: String = "Hi LLDB"var myArray: [Int] = [1, 2, 3]var body: some View {VStack {Text("Hello World"…...
2.4 网络安全新技术
数据参考:CISP官方 目录 云计算安全大数据安全移动互联网安全物联网安全工业互联网安全 一、云计算安全 1、云计算定义 云计算是指通过网络访问可扩展的、灵活的物理或虚拟共享资源池,并按需自助获取和管理资源的模式。在云计算中,计算资…...
人生天地之间,若白驹之过隙,忽然而已
人生天地之间,若白驹之过隙,忽然而已 这段时间有个同事离职了,其实身边不断有老人走、有新人来,但这回走的同事和别的有些不同,当时我入职面试的时候就是他面试的我,工作中有啥问题都会请教他,…...
MySQL — MVCC
文章目录 MVCCMVCC 实现原理隐藏字段undo logundo log的用途undo log类型 版本链ReadView MVCC InnoDB是一个多版本的存储引擎。它保留有关已更改行的旧版本的信息,以支持并发和回滚等事务性特性。这些信息存储在undo表空间中的数据结构称为回滚段。InnoDB使用回滚…...
Android模板设计模式之 - 构建整个应用的BaseActivity
1. 模式介绍 模式的定义 定义一个操作中的算法的框架,而将一些步骤延迟到子类中。使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 模式的使用场景 1.多个子类有公有的方法,并且逻辑基本相同时。 2.重要、复杂的算法,可…...
浏览器缓存技术--localStorage和sessionStorage原理与使用
localStorage和sessionStorage LocalStorageLocalStorage的特点存入/读取数据使用场景 sessionStoragesessionStorage的特点存入/读取数据使用场景sessionStorage 、localStorage 和 cookie 之间的区别 测试localStorage和sessionStorageIndexedDB LocalStorage 为了弥补 Cook…...
无涯教程-Perl - endservent函数
描述 此功能告诉系统您不再期望使用getservent从服务文件中读取条目。 语法 以下是此函数的简单语法- endservent返回值 此函数不返回任何值。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perlwhile(($name, $aliases, $port_number,$protocol_name)getservent())…...
MRO工业品采购过程中,采购人员要注意哪些事项
MRO工业品指工厂或企业对其生产和工作设施、设备进行保养、维修,保证其运行所需要的非生产性物料,这些物料可能是用于设备保养、维修的备品备件,也可能是保证企业正常运行的相关设备,耗材等物资,如安全防护、传媒广电、…...
Jaeger 教程,OpenTelemetry 教程
ywanbing/otelToJaeger: opentelemetry 的链路追踪写入Jaeger中,使用的例子,拉下来就能跑(你已经部署好Jaeger的环境) (github.com) 上面是一个使用 OpenTelemetry trace 的一个源码。...
P1597 语句解析
题目背景 木有背景…… 题目描述 一串长度不超过 255 255 255 的 PASCAL 语言代码,只有 a , b , c a,b,c a,b,c 三个变量,而且只有赋值语句,赋值只能是一个一位的数字或一个变量,每条赋值语句的格式是 [变量]:[变量或一位整数…...
Java课题笔记~ Request请求
1.请求消息格式 客户端发送一个HTTP请求到服务器的请求消息包括以下格式: 请求行(request line)、请求头部(header)、空行和请求数据四个部分组成。下图给出了请求报文的一般格式。 GET请求: POST请求&am…...
Untiy Json和Xml的序列化和反序列化
Json的序列化和反序列化 1.定义数据类 [Serializable] public class ZoomPoint {// 点名称, 将作为Key被字典存储public string name;// 轴心X坐标public Vector2 pivot Vector2.one / 2;// 放大倍率,小于1是为缩小倍率,小于0是取绝对值,不…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
