Vue3打造穿梭框，轻松实现数据交互与排序

2023-08-09 15:37:57

Vue3 穿梭框效果：在列表之间轻松传输数据

简介

在前端开发中，我们经常需要在两个列表之间传输数据，例如从左侧列表选择数据，然后将其添加到右侧列表中。这种交互效果被称为穿梭框效果。使用 Vue3，我们可以轻松实现这一效果，并保持数据的正确顺序。

实现步骤

1. 安装 Vue3

首先，我们需要安装 Vue3。在项目根目录下，运行以下命令：

npm install vue@next

2. 导入 Vue3

然后，在我们的组件中导入 Vue3：

import { createApp } from 'vue';

3. 创建列表

接下来，我们需要创建两个列表，一个用来存放左侧的数据，另一个用来存放右侧的数据。我们还可以创建两个按钮，分别用来将数据从左侧列表添加到右侧列表，以及将数据从右侧列表添加到左侧列表。

4. 创建 Vue 实例

最后，我们需要创建一个 Vue 实例，并将其挂载到 DOM 元素上。

完整示例

<template>
  <div>
    <ul>
      <li v-for="item in leftList" @click="addToRight(item)">{{ item }}</li>
    </ul>
    <button @click="addToRight">></button>
    <button @click="addToLeft"><</button>
    <ul>
      <li v-for="item in rightList" @click="addToLeft(item)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftList: ['A', 'B', 'C'],
      rightList: []
    };
  },
  methods: {
    addToRight(item) {
      this.rightList.push(item);
      this.leftList = this.leftList.filter(i => i !== item);
    },
    addToLeft(item) {
      this.leftList.push(item);
      this.rightList = this.rightList.filter(i => i !== item);
    }
  }
};
</script>