vue文件上传 怎么实现每次第一次点击展示内容为空
时间: 2023-10-07 17:03:10 浏览: 46
实现vue文件上传时,想要每次第一次点击展示内容为空,可以通过设置一个数据变量来控制展示的内容。
首先,在data里面定义一个变量,比如namedisplay,设置其初始值为空字符串,即namedisplay: ''。
然后,在上传按钮的点击事件函数中,可以加入一个判断逻辑。判断该变量是否为空,如果为空则清空展示的内容;如果不为空,则展示该内容。
示例如下:
```html
<template>
<div>
<input type="file" @change="uploadFile" />
<div id="display">{{ namedisplay }}</div>
</div>
</template>
<script>
export default {
data() {
return {
namedisplay: '',
};
},
methods: {
uploadFile(event) {
const file = event.target.files[0];
this.namedisplay = file ? file.name : '';
},
},
};
</script>
```
在上述示例代码中,当文件选择时,会触发上传文件的方法uploadFile。在该方法中,获取选中文件的名字,并通过判断给namedisplay赋值。如果文件存在,就将文件名赋值给namedisplay;如果文件不存在,则将namedisplay置为空字符串。
在template中展示namedisplay的内容即可。这样,每次第一次点击上传文件按钮时,展示内容就会为空。