当前位置：网站首页 > 热门文章 > 正文

vue中怎么向数组中插入，修改，删除元素

bigegpt 2024-10-17 08:07 6 浏览

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<ul>

</ul>

</div>

const app = new Vue({

el: '#app',

data: {

letters: ['u', 'b', 'c', 'd', 'a']

methods: {

btnClick() {

// 1.push方法

// this.letters.push('aaa')

// this.letters.push('aaaa', 'bbbb', 'cccc')

// 2.pop(): 删除数组中的最后一个元素

// this.letters.pop();

// 3.shift(): 删除数组中的第一个元素

// this.letters.shift();

// 4.unshift(): 在数组最前面添加元素

// this.letters.unshift()

// this.letters.unshift('aaa', 'bbb', 'ccc')

// 5.splice作用: 删除元素/插入元素/替换元素

// 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)

// 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素

// 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素

// splice(start)

// splice(start):

// this.letters.splice(1) // 删除第一个元素后面所有的元素

// this.letters.splice(1,2) // 删除第一个元素后面的两个元素这个从上面复制下来不能用，现敲的就能用

// this.letters.splice(1, 3, 'm', 'n', 'l', 'x')

// this.letters.splice(1, 0, 'x', 'y', 'z')

// 5.sort()

// this.letters.sort() // 从小到大的顺序排序

// 6.reverse()

// this.letters.reverse() // 对数据进行反转排序

// 注意: 通过索引值修改数组中的元素

// this.letters[0] = 'bbbbbb'; // 这种通过下标这种方式改变值有可能不是响应式的，就是值改了，页面不改

// this.letters.splice(0, 1, 'bbbbbb')

// set(要修改的对象, 索引值, 修改后的值)

// Vue.set(this.letters, 0, 'bbbbbb') // 修改数组对象的值可以做到响应式

}

})

// function sum(num1, num2) {

// return num1 + num2

// }

// function sum(num1, num2, num3) {

// return num1 + num2 + num3

// }

// function sum(...num) { //...num 参数时是一个可变参数，是一个数组

// console.log(num += num);

// }

// sum(20, 30, 40, 50, 601, 111, 122, 33)

</script>

</body>

</html>

vue获取元素高度

上一篇：使用Vue.js指令和IntersectionObserver优化图像加载
下一篇：推荐20个开源的前端低代码项目前端低代码开发平台

vue中怎么向数组中插入，修改，删除元素

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解