Vue数组操作之slice

在 Vue.js 中，slice() 方法用于提取数组的一部分，并返回一个新的数组。这个方法不会修改原数组，而是返回一个浅拷贝。slice() 的语法如下：

array.slice(start, end)

• start：开始提取的位置（从 0 开始）。如果省略，默认为 0。
• end：结束提取的位置（不包括此位置的元素）。如果省略，默认为数组的长度。

基本用法

提取部分数组

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // ['banana', 'cherry']

在这个例子中，slice(1, 3) 提取了从索引 1 到索引 3 之前的元素（不包括索引 3 处的元素）。

从起始位置提取到末尾

let slicedFruits = fruits.slice(2);
console.log(slicedFruits); // ['cherry', 'date', 'elderberry']

如果只提供 start 参数，那么 slice 会提取从 start 到数组末尾的所有元素。

复制整个数组

let copiedFruits = fruits.slice();
console.log(copiedFruits); // ['apple', 'banana', 'cherry', 'date', 'elderberry']

省略 start 和 end 参数时，slice 会复制整个数组。

使用负索引

负索引表示从数组末尾开始计数。

let slicedFruits = fruits.slice(-3, -1);
console.log(slicedFruits); // ['cherry', 'date']

在这个例子中，slice(-3, -1) 提取了从倒数第三个元素到倒数第一个元素之前的元素。

在 Vue.js 中使用 slice

在 Vue.js 组件中，slice 方法常用于以下场景：

1. 分页：将数据分割成多个部分，并按需显示某一部分。
2. 避免直接修改原数组：当需要操作数组的副本而不影响原数组时，使用 slice 可以创建副本。

示例：分页显示数据

<template>
  <div>
    <ul>
      <li v-for="(user, index) in paginatedUsers" :key="index">
        {{ user.name }} - {{ user.age }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 0">上一页</button>
    <button @click="nextPage" :disabled="currentPage >= totalPages - 1">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Charlie', age: 20 },
        { name: 'David', age: 35 },
        { name: 'Eve', age: 28 }
      ],
      currentPage: 0,
      pageSize: 2
    };
  },
  computed: {
    paginatedUsers() {
      let start = this.currentPage * this.pageSize;
      let end = start + this.pageSize;
      return this.users.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.users.length / this.pageSize);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages - 1) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 0) {
        this.currentPage--;
      }
    }
  }
};
</script>

在这个示例中：

• paginatedUsers 计算属性根据 currentPage 和 pageSize 计算出当前页要显示的用户数据，使用 slice 方法从原数组中提取相应的部分。
• totalPages 计算属性计算总页数。
• nextPage 和 prevPage 方法用于切换分页。

这样，通过点击 “上一页” 和 “下一页” 按钮，可以在用户列表中分页显示数据。

原文地址：https://blog.csdn.net/weixin_51743499/article/details/140613722

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！