Vue.js：如何获取选择下拉框中选项的属性？

Question

如果我们绑定一个选择框值，如下例所示：<select v-model="car"> <option number="one">BMW</option> <option number="two">Audi</option> <option number="three">Mercedes</option></select>如何number在 Vue.js 中获取属性值而不是汽车名称？

Answer 1

您应该使用value而不是number：

<select v-model="car">

 <option value="one">BMW</option>

 <option value="two">Audi</option>

 <option value="three">Mercedes</option>

</select>

选定的值将分配给car属性。

例子 ：

Vue.config.devtools = false;

Vue.config.productionTip = false;

new Vue({

  el: '#app',

  data() {

    return {

      car: ''

    }

  }

})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app" class="container">

  <select v-model="car">

    <option value="one">BMW</option>

    <option value="two">Audi</option>

    <option value="three">Mercedes</option>

  </select>

  

  {{car}}

</div>