使用vuetify编写一段展示当前目录文件的代码
时间: 2023-06-03 09:06:40 浏览: 69
好的,以下是一段用vuetify编写的展示当前目录文件的代码:
```
<template>
<v-card>
<v-card-title>当前目录文件</v-card-title>
<v-card-text>
<v-list>
<v-list-item v-for="file in files" :key="file">
<v-list-item-icon>
<v-icon v-if="isDirectory(file)">mdi-folder</v-icon>
<v-icon v-else>mdi-file</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ file }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card-text>
</v-card>
</template>
<script>
export default {
data() {
return {
files: [],
};
},
mounted() {
this.getFiles();
},
methods: {
getFiles() {
// 通过使用node.js的fs模块获取当前目录下的文件列表
const fs = require('fs');
const files = fs.readdirSync('./');
this.files = files;
},
isDirectory(file) {
const fs = require('fs');
const stats = fs.statSync(file);
return stats.isDirectory();
},
},
};
</script>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)