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

Posted 2023-02-22

【中文标题】Vue.js：如何在选择下拉框中获取选项的属性？

【英文标题】：Vue.js: How to get attributes of an option in Select dropdown box?

【发布时间】：2021-02-22 16:18:21

【问题描述】：

如果我们像下面的例子那样绑定一个选择框的值：

<select v-model="car">
 <option number="one">BMW</option>
 <option number="two">Audi</option>
 <option number="three">Mercedes</option>
</select>

如何在 Vue.js 中获取 number 属性的值而不是汽车的名称？

【参考方案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>