Vue 列表倒置时复制原始列表

Orange-OS

于 2024-01-09 22:00:00 发布

阅读量363

点赞数 7

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_43175672/article/details/135486533

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中实现列表的倒置，同时通过深拷贝确保不会修改原始数据。通过`data`和`computed`属性展示了两种方法来生成倒置后的列表。

摘要由CSDN通过智能技术生成

Vue 列表倒置时复制原始列表

<template>
  <div>
    <!-- 原始列表 -->
    <h2>原始列表</h2>
    <ul>
      <li v-for="item in originalList" :key="item">{{ item }}</li>
    </ul>
    
    <!-- 倒置后的列表 -->
    <h2>倒置后的列表</h2>
    <ul>
      <li v-for="item in reversedList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      originalList: ['Item 1', 'Item 2', 'Item 3'], // 原始列表
    };
  },
  
  computed: {
    reversedList() {
      const list = [...this.originalList]; // 复制原始列表
      
      // 对列表进行倒置
      list.reverse();
      
      return list;
    },
      reversedList() {
      // 对列表进行倒置
      return this.list.slice().reverse(); // 使用slice()方法创建了一个副本，以避免直接修改原始列表
    }
  }
};
</script>