Vue.js: 如何获取Select下拉框中选项的属性?
Vue.js: How to get attributes of an option in Select dropdown box?
如果我们绑定一个 Select 框值,如下例:
<select v-model="car">
<option number="one">BMW</option>
<option number="two">Audi</option>
<option number="three">Mercedes</option>
</select>
如何获取 number
属性的值而不是 Vue.js 中的汽车名称?
你应该使用 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>
如果我们绑定一个 Select 框值,如下例:
<select v-model="car">
<option number="one">BMW</option>
<option number="two">Audi</option>
<option number="three">Mercedes</option>
</select>
如何获取 number
属性的值而不是 Vue.js 中的汽车名称?
你应该使用 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>