在 Vue 开发中,处理下拉框(Select)时,我们往往不仅关心选中的值(value),有时还需要知道它在列表中的具体位置(index)。虽然 v-model 能方便地绑定数据,但若要精准获取 DOM 层面的索引,监听原生事件依然是最直接的方式。
下面是一个基于 Vue 2 的示例,展示了如何通过 change 事件同时获取索引和值:
<div id="app">
<select v-model="selectItem" @change="selectFn($event)">
<!--选择项的 value 值默认选择项文本 可动态绑定选择项的 value 值 更改 v-model 指令绑定数据-->
<option v-for="item in items" :value="item.id">{{item.name}}</option>
</select>
<div>{{selectItem}}</div> <!--选择项的 value 值-->
</div>
<script>
new Vue({
el: '#app',
data: {
selectItem: '分类 1',
items: [
{id:11, name: '分类 1'},
{id:22, name: '分类 2'},
{id:33, name: }
]
},
: {
() {
.(e)
.(e..)
.(e..)
}
}
})

