Vue JS如何在选定的选择的选项上更改变量的值

Question

我在选择中有3个选项，并希望在选择第三个时出现文本框，该怎么做？ 我到目前为止为此momont，但它不起作用。

<select asp-for="UploadOption" name="UploadOption">
  <option value="1" selected="selected" name="img">PNG/JPG/WEBP image</option>
  <option value="2" name="video">GIF/APNG/WEBM video</option>
  <option v-on:change="streamable = true" value="3" name="streamable">Streamable</option>
</select>
<input v-if="streamable" type="url" placeholder="https://streamable.com/dxe6b" />
<label v-else>Choose file type you'd like to upload</label>

Answer 1

使用v-model进行选择，并根据模型何时为所需值显示/隐藏输入。

 console.clear() new Vue({ el: "#app", data:{ uploadOption: null } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app"> <select name="UploadOption" v-model="uploadOption"> <option value="1">PNG/JPG/WEBP image</option> <option value="2">GIF/APNG/WEBM video</option> <option value="3">Streamable</option> </select> <input v-if="uploadOption == 3" type="url" placeholder="https://streamable.com/dxe6b" /> <label v-else>Choose file type you'd like to upload</label> </div>