在vue中操作数组

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_41402200/article/details/100174290

1. 前言

---

vue 中对数组简单的新增和删除

2. 新增

---

2.1 push 添加到最后一位

2.1.1 代码

// 数组
var arr = ['java', 'javascript'];
console.log('============ 当前数组 ============')
console.log(arr)
console.log('============ 当前数组 ============')
// 添加到最后一个
arr.push('vue')
console.log('============ push -> "vue" ============')
console.log(arr)
console.log('============ push -> "vue" ============')

2.1.2 运行结果

============ 当前数组 ============
(2) ["java", "javascript"]
============ 当前数组 ============
============ push -> "vue" ============
(3) ["java", "javascript", "vue"]
============ push -> "vue" ============

2.2 unshift 添加到第一位

2.2.1 代码

// 数组
var arr = ['java', 'javascript'];
console.log('============ 当前数组 ============')
console.log(arr)
console.log('============ 当前数组 ============')
// 添加到第一个
arr.unshift('c')
console.log('============ unshift -> "c" ============')
console.log(arr)
console.log('============ unshift -> "c" ============')

2.2.2 运行结果

============ 当前数组 ============
(2) ["java", "javascript"]
============ 当前数组 ============
============ unshift -> "c" ============
(3) ["c", "java", "javascript"]
============ unshift -> "c" ============

3. 删除

---

3.1 splice 按指定索引删除

3.1.1 代码

// 数组
var arr = ['java', 'javascript', 'vue'];
console.log('============ 当前数组 ============')
console.log(arr)
console.log('============ 当前数组 ============')
// 删除第二个
arr.splice(1, 1)
console.log('============ splice -> 1 ============')
console.log(arr)
console.log('============ splice -> 1 ============')

注：这里 splice(1, 1) 方法中，第一个参数为要删除元素的索引，第二个参数为要删除元素的数量（从索引开始）

3.1.2 运行结果

============ 当前数组 ============
(3) ["java", "javascript", "vue"]
============ 当前数组 ============
============ splice -> 1 ============
(2) ["java", "vue"]
============ unshift -> 1 ============

3.2 按指定元素删除

3.2.1 代码

// 数组
var arr = ['java', 'javascript', 'vue'];
console.log('============ 当前数组 ============')
console.log(arr)
console.log('============ 当前数组 ============')
// 删除指定元素
arrayDelete(arr, 'java')
console.log('============ splice -> "java" ============')
console.log(arr)
console.log('============ splice -> "java" ============')
        
function arrayDelete(arr, item) {
  var index = arr.indexOf(item);
  if (index > -1) {
    arr.splice(index, 1);
  }
}

3.2.2 运行结果

============ 当前数组 ============
(3) ["java", "javascript", "vue"]
============ 当前数组 ============
============ splice -> "java" ============
(2) ["javascript", "vue"]
============ splice -> "java" ============

4. 结语

---

长期更新

---

欢迎来访我的vue专栏总篇博客

希望能够帮助到你

over

扫描二维码关注公众号，回复： 7194639 查看本文章