Vue 中 Select 获取选中项索引的实战技巧

在 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..) 
            }
        }
    })