Vue JS如何改变所选select选项的变量值

Question

我有三个选项在选择和想要文本框出现时，第三是选择，如何做到这一点？到目前为止，我是为了这辆车买的，但它不起作用。

<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>

​