Question

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

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

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

1 个答案: