Javascript 文件输入使用v-if隐藏后不会显示文件名

我正在创建一个vue web应用程序，我有一个简单的文件输入，但有一些逻辑，因此有人可以隐藏或显示文件输入。问题是，一旦隐藏文件输入并再次显示，它将删除文件名。当变量仍保存文件时，文件名不显示

下面是一些相关的代码并对其进行了演示

<div id="app">
  <button @click="switch1=!switch1">switch1</button>
  <div v-if="switch1">
    <h4>Select an image</h4>
    <input type="file" @change="onFileChange">
  </div>
</div>

开关1
选择一个图像

使用

v-if

时，输入不会隐藏，而是从DOM中删除

要隐藏元素，请改用

v-show

：

<div id="app">
  <button @click="switch1=!switch1">switch1</button>
  <div v-show="switch1">
    <h4>Select an image</h4>
    <input type="file" @change="onFileChange">
  </div>
</div>

开关1
选择一个图像

使用

v-if

时，输入不会隐藏，而是从DOM中删除

要隐藏元素，请改用

v-show

：

<div id="app">
  <button @click="switch1=!switch1">switch1</button>
  <div v-show="switch1">
    <h4>Select an image</h4>
    <input type="file" @change="onFileChange">
  </div>
</div>

开关1
选择一个图像

使用

v-show=“switch1”

：这不会删除和创建DOM元素Yeah@SLYcee是正确的-

v-if

从DOM中删除元素，因为

v-show

仅切换可见性。这是任何

输入

元素在重新呈现时没有绑定值的行为方式。文件输入的问题是无法从Javascript设置它们（出于安全原因）。它们是只读的。这就是为什么不能使用

v-model

而必须使用

change

处理程序的原因，也是基于

v-if

重新渲染时该值消失的原因。使用

v-show=“switch1”

：这不会删除和创建DOM元素Yeah@slyce是对的-

v-if

从DOM中删除元素，因为

v-show

仅切换可见性。这是任何

输入

元素在重新渲染时没有绑定值的行为方式。文件输入的问题是无法从Javascript设置它们（出于安全原因）。它们是只读的。这就是为什么不能使用

v-model

而必须使用

change

处理程序的原因，也是基于

v-if

重新渲染时该值消失的原因。