vue中实现创建文件夹和文件列表功能

创建文件夹和文件列表功能是常见的文件管理功能，可以通过Vue框架来实现。

首先，我们需要在Vue组件中定义一个文件夹和文件列表的数据结构，可以使用数组来存储。例如：

data() {
  return {
    folders: [
      { name: 'Folder 1', files: [] },
      { name: 'Folder 2', files: [] }
    ],
    currentFolderIndex: 0 // 当前文件夹的索引
  }
}

上面的代码定义了一个包含两个文件夹的数组，每个文件夹包含一个名称和一个空的文件列表。还定义了一个currentFolderIndex变量，用于记录当前选中的文件夹的索引。

接下来，我们可以定义两个方法来实现创建文件夹和文件的功能。例如：

methods: {
  addFolder() {
    const folderName = prompt('请输入文件夹名称', 'New Folder')
    if (folderName) {
      this.folders.push({ name: folderName, files: [] })
    }
  },
  addFile() {
    const fileName = prompt('请输入文件名称', 'New File')
    if (fileName) {
      const currentFolder = this.folders[this.currentFolderIndex]
      currentFolder.files.push(fileName)
    }
  }
}

上面的代码中，addFolder方法用于创建文件夹，通过prompt弹出一个对话框获取用户输入的文件夹名称，并将新的文件夹对象添加到folders数组中。addFile方法用于创建文件，同样通过prompt弹出对话框获取文件名，并将文件名添加到当前文件夹的文件列表中。

最后，我们可以在Vue组件的模板中使用v-for指令来展示文件夹和文件列表。例如：

<template>
  <div>
    <button @click="addFolder">创建文件夹</button>
    <button @click="addFile">创建文件</button>
    <ul>
      <li v-for="(folder, index) in folders" :key="index">
        {{ folder.name }}
        <ul>
          <li v-for="(file, index) in folder.files" :key="index">
            {{ file }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

上面的代码中，我们使用v-for指令分别循环展示文件夹和文件列表。可以看到，我们通过绑定的数据来展示文件夹和文件列表，当数据发生变化时，UI会自动更新。

通过上面的步骤，我们就可以实现Vue中的创建文件夹和文件列表功能了。