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">&nbsp;<option value="one">BMW</option>&nbsp;<option value="two">Audi</option>&nbsp;<option value="three">Mercedes</option></select>选定的值将分配给car属性。例子 ：Vue.config.devtools = false;Vue.config.productionTip = false;new Vue({&nbsp; el: '#app',&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; car: ''&nbsp; &nbsp; }&nbsp; }})<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">&nbsp; <select v-model="car">&nbsp; &nbsp; <option value="one">BMW</option>&nbsp; &nbsp; <option value="two">Audi</option>&nbsp; &nbsp; <option value="three">Mercedes</option>&nbsp; </select>&nbsp;&nbsp;&nbsp; {{car}}</div>