VUE選擇框

選擇框

單選時：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

請選擇 A B C Selected: C

如果 v-model 表達式的初始值未能匹配任何選項，<select> 元素將被渲染爲“未選中”狀態。在 iOS 中，這會使用戶無法選擇第一個選項。因爲這樣的情況下，iOS 不會觸發 change 事件。因此，更推薦像上面這樣提供一個值爲空的禁用選項。

多選時 (綁定到一個數組)：

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

A B C
Selected: []

用 v-for 渲染的動態選項：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

       One            Two            Three      Selected: A