Vue中 的数组操作

[博客zhu虎康]

目录

• 数组操作方法
• push();末尾填
• pop(); 末尾删
• shift();首位删
• unshift();首位增
• splice();增删改
• sort();排序
• reverse();翻转

<template>
<div>
  <ul>
    <li v-for="item in list" :key="item">{{item}}</li>
  </ul>
  <button @click="changeList">改变数组</button>
</div>
</template>

<script>
import { reactive } from 'vue';
import { pop, reverse, shift, sort, splice, unshift } from '../../../vue-element-admin-master/mock/user';

export default {
  data(){
    return {
      list:[1,3,4,6,7]
    }
  },
  methods:{
    changeList:function(){
        数组操作方法
    }
  }
}
</script>

数组操作方法

push();末尾填

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

pop(); 末尾删

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

    shift();首位删

• shift();// 给数组第一位进行删除
  • this.list.shift();

    unshift();首位增

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

    splice();增删改

• splice();//删除元素、插入元素、替换元素
• 第一个参数，表示开始插入或者开始删除的元素的位置下标

• 第二个参数，表示传入要删除几个元素（如果没有传，就删除后面所有的元素）

  • 删除元素 this.splice(1)

• 第二个参数，传入0，并且后面接上要插入的元素

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

• 第二个参数，表示我们替换几个元素，后面的参数表示用于替换前面的元素

  • 替换元素 this.splice(1,2,8,9)

    总结：参数个数为2个，是删除，参数个数是3个并且第二个参数是0表示新增，不为0表示替换

    sort();排序

• this.list.sort();排序

  reverse();翻转

• this.list.reverse();翻转

[浪哥嗨害嗨]

互关