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种用法:

        1、删除 —— 可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除项的项数。
        2、插入 —— 可以向指定位置插入任意数量的项,只需要提供3个参数:插入起始位置、0(要删除的项数)和要插入的项。 如果要插入多个项,可以再传入第四、第五,一直任意多个项。
        3、替换 —— 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需要指定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)通过这种赋值操作进行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/236358.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Unity】【WebRTC】如何用Unity而不是浏览器接收远程画面

【背景】 之前几篇我们讨论了如何设置信令服务器&#xff0c;如何发送画面给远端以及如何用浏览器查看同步画面&#xff0c;今天来讨论如何实现Unity内部接收画面。 看本篇之前请先看过之前将web服务器设置和基本远程画面功能的几篇博文。&#xff08;同专栏下查看&#xff09…

如何通过宝塔面板搭建一个MySQL数据库服务并实现无公网ip远程访问?

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…

python-dlib实现人脸提取和分割

效果 → 参考资料和资源 GitHub - Onwaier/SegfaceAndAlignByDlib: 用dlib实现脸部分割和人脸对齐 shape_predictor_68_face_landmarks.dat 下载地址_shape_predictor_68_face_landmarks.dat下载-CSDN博客 未运行的参考资料 dlib实现脸部分割与人脸对齐 - 知乎 py代码 &…

【Lidar】Open3D点云DBSCAN聚类算法:基于密度的点云聚类(单木分割)附Python代码

1 DBSCAN算法介绍 DBSCAN聚类算法是一种基于密度的聚类算法&#xff0c;全称为“基于密度的带有噪声的空间聚类应用”&#xff0c;英文名称为Density-Based Spatial Clustering of Applications with Noise。 DBSCAN聚类算法能够发现任意形状的类别&#xff0c;并且对噪音数据具…

全网最全pytest大型攻略,单元测试学这就够了!

pytest 是一款以python为开发语言的第三方测试&#xff0c;主要特点如下&#xff1a; 比自带的 unittest 更简洁高效&#xff0c;兼容 unittest框架支持参数化可以更精确的控制要测试的测试用例丰富的插件&#xff0c;已有300多个各种各样的插件&#xff0c;也可自定义扩展&am…

数字化时代的智能支持:亚马逊云科技轻量应用服务器技术领先

轻量应用服务器是一种简化运维、门槛低的弹性服务器&#xff0c;它的"轻"主要体现在几个方面&#xff1a;开箱即用、应用优质、上手简洁、投入划算、运维简便以及稳定可靠。相较于普通的云服务器&#xff0c;轻量应用服务器简化了云服务的操作难度、使用和管理流程&a…

mysql:查询服务器当前打开的连接数量

使用命令show global status like Threads_connected;可以查询mysql服务器当前打开的连接数量。 例如&#xff0c;查询如下&#xff1a; 启动应用&#xff0c;连接数据库&#xff0c;占用了1个连接&#xff0c;再查询如下&#xff1a; 由输出可以看出&#xff0c;打开的连接…

低代码和纯代码:双向奔赴,共创未来ing……

低代码开发是近年来迅速崛起的软件开发方法&#xff0c;让编写应用程序变得更快、更简单。有人说它是美味的膳食&#xff0c;让开发过程高效而满足&#xff0c;但也有人质疑它是垃圾食品&#xff0c;缺乏定制性与深度。你认为低代码到底是美味的膳食还是垃圾食品呢&#xff0c;…

【方案】如何利用大数据+云计算技术打造智能环境监控系统?

小编在之前的文章中也提到过基于云计算的环境智能监控系统是什么样的&#xff0c;收到了很多朋友的关注&#xff0c;今天小编就再次根据智能监控为切入点&#xff0c;深入讲解智能环境监控系统方案的详细落实。 1、传感器节点&#xff1a;首先需要选择适合应用场景的各类传感器…

Actuator内存泄露及利用Swagger未授权自动化测试实现

目录 0x00 前言 0x01 Actuator 泄露及利用 1、Actuator heapdump 内存泄露 2、知道泄露后如何进一步利用 3、如何发现 Actuator 泄露&#xff08;白盒/黑盒&#xff09; 0x02 Swagger自动化测试 1、什么是Swagger&#xff1f; 2、PostmanBurpSuiteXray 联动 3、思考 0x…

JavaAwtSwing的JFrame的pack()方法,容器适配子组件大小,笔记231220

pack()是extends自Window类的方法 使此窗口的大小适合其子组件的首选大小和布局。如果其中一个尺寸小于上一次调用setMinimumSize方法指定的最小尺寸&#xff0c;则会自动放大窗口的宽度和高度。 如果窗口和/或其所有者还不可显示&#xff0c;则在计算首选大小之前&#xff0…

tf卡数据恢复怎么做?记好这4个步骤!

“为了更好的保存数据&#xff0c;我一直都是用TF卡的。很多重要的文件和数据都保存在里面。但是我最近使用时&#xff0c;发现有部分数据丢失了。不知道该怎么办&#xff0c;有没有朋友可以帮帮我呀&#xff1f;” TF卡是一种闪存存储卡&#xff0c;通常用于手机、平板电脑和其…

Linux shell编程学习笔记37:readarray命令和mapfile命令

目录 0 前言1 readarray命令的格式和功能 1.1 命令格式1.2 命令功能1.3 注意事项2 命令应用实例 2.1 从标准输入读取数据时不指定数组名&#xff0c;则数据会保存到MAPFILE数组中2.2 从标准输入读取数据并存储到指定的数组2.3 使用 -O 选项指定起始下标2.4 用-n指定有效行数…

北斗高精度基坑安全监测系统解决方案

目录 1.概述 1.1背景 1.2设计原则 1.3建设内容 2.系统架构 2.1总体架构 2.2拓扑图 2.3云平台 2.3.1概述 2.3.2技术架构 2.3.3平台功能 2.4监测子系统 2.4.1位移监测子系统 2.4.2应力监测子系统 2.4.3环境监测子系统 1.概述 1.1背景 基坑监测是基坑工程施工中的…

一个前端大佬的十年回顾 | 漫画前端的前世今生

作者&#xff1a;京东科技 胡骏 引言 岁月如梭&#xff0c;十载流年 前端技术&#xff0c;蓬勃向前 HTML&#xff0c;CSS&#xff0c;JavaScript 演绎出璀璨夺目的技术画卷 回到十年前&#xff0c;前端技术就像一名戴着厚重眼镜的书呆子&#xff0c;总是小心翼翼&#xff…

车载蓝牙物联网解决方案

车载蓝牙物联网解决方案是一种基于蓝牙技术&#xff0c;结合物联网技术的智能车载系统。它利用蓝牙技术将智能手机、智能手表、智能车载设备等连接起来&#xff0c;实现设备之间的无缝通信和数据共享&#xff0c;为驾驶者提供更加便捷、安全和智能的驾驶体验。 车载蓝牙物联网解…

Flask重定向后无效果前端无跳转无反应问题

在网上搜了一下并没有什么好的解决方案&#xff0c;有的话也只是告诉你如何修改代码&#xff0c;并没有讲明白其中的原理以及导致问题的核心&#xff0c;因此特意去了解了一下HTTP的规范找到了答案 问题说明 问题出现的流程大致都是前端发送Ajax请求给后端&#xff0c;进行一些…

【愚公系列】2023年12月 HarmonyOS教学课程 037-ArkUI事件(焦点事件)

&#x1f3c6; 作者简介&#xff0c;愚公搬代码 &#x1f3c6;《头衔》&#xff1a;华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xf…

Flink电商实时数仓(三)

DIM层代码流程图 维度层的重点和难点在于实时电商数仓需要的维度信息一般是动态的变化的&#xff0c;并且由于实时数仓一般需要一直运行&#xff0c;无法使用常规的配置文件重启加载方式来修改需要读取的ODS层数据&#xff0c;因此需要通过Flink-cdc实时监控MySql中的维度数据…

相互独立的Gamma分布变量之和的分布

两个变量之和的情况 设随机变量相互独立&#xff0c;并且服从参数为的分布&#xff0c;记作&#xff1b;服从参数为的分布&#xff0c;记作&#xff0c;和的概率密度分别为&#xff1a; 其中 其中 那么随机变量服从参数为的分布&#xff0c;记作。 推广到n个变量之和的情况 …