vue中<select>绑定事件

• Z时代
• 2024-01-10
• 分类：综合

<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: \'分类3\'}
            ]
        },
        methods: {
            selectFn(e) {
                console.log(e)
                console.log(e.target.selectedIndex) // 选择项的index索引
                console.log(e.target.value) // 选择项的value
            }
        }
    })
</script>

以上是 vue中<select>绑定事件 的全部内容， 来源链接： utcz.com/z/375479.html