vue2.6的可以

最新推荐文章于 2024-08-01 17:00:15 发布

hamimelon2020

最新推荐文章于 2024-08-01 17:00:15 发布

阅读量53

点赞数

分类专栏： JavaScript vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_40945354/article/details/121265671

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏


<!DOCTYPE html>
<html>
	<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 src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <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>
</html>