[vue]更新数组

devtools/2025/4/1 13:58:15/

文章目录

  • 一、语法介绍
  • 二、添加代码
  • 三、结果展示
  • 四、参考文献

如有错误,请指正!!!

一、语法介绍

1、问题来源
       我们在处理网页时,原有数组不能满足需求,需要去更新一个数组。
2、解决办法

  • push():给数组末尾添加元素,this.list.push(7,8,9);

  • pop():删除数组末尾的元素,this.list.pop();

  • shift():删除数组的第一个元素,this.list.shift();

  • unshift():给数组的首位添加元素,this.list.unshift(7);

  • splice():删除元素、插入元素、替换元素;

    第一个参数:表示开始插入或开始删除的元素下标

    删除元素, this.list.splice(1,3);

    第二个参数:表示要删除几个元素(如果是没有参数,就删除后面所有元素);

    插入元素,this.list.splice(1,0,7,8,9);

    第二个参数:传入“0”,接上要插入的元素

    替换元素,this.list.splice(1,3,7,8,9);

    第二个元素:表示我们要替换几个元

  • sore():排序,this.list.sort();

  • reverse():翻转 ,this.list.reverse();

二、添加代码

javascript"><template><h3>数组动态监听</h3><button @click="addList">添加数据</button><ul><li v-for="(item,index) in names" :key="index">{{item}}</li></ul>
</template><script>
export default {data() {return {names: ["iwen", "ime", "frank"],};},methods:{addList(){// 引起ui自动更新// this.names.push("sakura");// 不会引起ui自动更新this.names.concat(["sakura"]);console.log(this.names.concat(["sakura"]));}}
};
</script>

三、结果展示

在这里插入图片描述

四、参考文献

[1] vue.js


http://www.ppmy.cn/devtools/172331.html

相关文章

21天Python计划:基础语法与课外练习

文章目录 前言基本概念注释与字符串数据类型列表&#xff08;List&#xff09;过滤与排序循环字典&#xff08;Dictionary&#xff09;字典循环运算符列表与字典的复制字典拾遗三元运算进制元组集合不可变集合字符串操作常用字符串方法字符编码的转换字符编码长度数据类型注意点…

第四章:优化字符串的使用:案例研究_《C++性能优化指南》notes

优化字符串的使用&#xff1a;案例研究 第四章重难点解析与代码实战多选题多选题答案与解析设计题设计题答案与解析 第四章重难点解析与代码实战 1. 原版问题代码分析 代码清单4-1&#xff1a;未优化的remove_ctrl()函数&#xff1a; #include <string>std::string rem…

GPT-SoVITS本地部署:低成本实现语音克隆远程生成音频全流程实战

文章目录 前言1.GPT-SoVITS V2下载2.本地运行GPT-SoVITS V23.简单使用演示4.安装内网穿透工具4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 今天要给大家安利一个绝对能让你大呼过瘾的声音黑科技——GPT-SoVITS&#xff01;这款由花儿不哭大佬精心打造的语音克隆神…

web3包含哪些关键技术栈,一些成功使用场景的分享

Web3的技术栈及其应用场景可归纳为以下六个核心模块&#xff0c;各模块均通过不同技术组合实现去中心化生态的构建&#xff1a; 一、关键技术栈及对应场景 ‌区块链与共识机制‌ 技术实现&#xff1a;以太坊、波场TRON等公链底层&#xff0c;结合PoW&#xff08;工作量证明&am…

Contactile三轴触觉传感器:多维力感赋能机器人抓取

在非结构化环境中&#xff0c;机器人对物体的精准抓取与操作始终面临巨大挑战。传统传感器因无法全面感知触觉参数&#xff08;如三维力、位移、摩擦&#xff09;&#xff0c;难以适应复杂多变的场景。Contactile推出的三轴触觉力传感器&#xff0c;通过仿生设计与创新光学技术…

IP大洗牌ipv6强势来袭!!!【ipv6配置及应用】

前言 随着时代的发展&#xff0c;IPv4&#xff08;互联网协议第四版&#xff09;已逐渐无法满足全球互联网爆炸式增长的需求。自20世纪80年代诞生以来&#xff0c;IPv4凭借其简洁的架构和约43亿的地址容量&#xff0c;支撑了互联网的早期扩张。然而&#xff0c;在移动互联网、物…

Java IO框架体系深度解析:从四基类到设计模式实践

Java IO框架体系深度解析&#xff1a;从四基类到设计模式实践 一、IO流体系架构总览 1.1 四基类设计哲学 Java IO框架以InputStream、OutputStream、Reader、Writer四个抽象类为根基&#xff0c;构建了完整的流式IO体系。这种设计体现了以下核心原则&#xff1a; 抽象分层&a…

R语言——循环

参考资料&#xff1a;学习R 在R中有三种循环&#xff1a;repeat、while和for。虽然向量化意味着我们可能并不需要大量使用它们&#xff0c;但在需要重复执行代码时&#xff0c;它们是非常有用的。 1、重复循环 R中最容易掌握的循环是repeat。它所做的事情就是反复地执行代码&a…