vue中如何获得select中选中的值

最新推荐文章于 2025-06-16 17:51:37 发布

。落幕-

最新推荐文章于 2025-06-16 17:51:37 发布

阅读量2.9w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： JavaScript vue 前端

本文链接：https://blog.csdn.net/weixin_44563906/article/details/97266402

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的下拉选择框示例，展示了如何通过v-model双向绑定来更新所选值，并在页面上显示。示例中包含了预定义的选项列表，以及如何将所选值反映在界面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template:

<select v-model="selected" >
 <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
 </option>
</select>
<span>Selected: {{ selected }}</span>

script:

 data: {
   selected: 'A',//select选中的值
   options: [
     { text: 'One', value: 'A' },
     { text: 'Two', value: 'B' },
     { text: 'Three', value: 'C' }
   ]
 }

选择就可以考到获取成功