vue操作select获取option值方式

 更新时间:2025年01月30日 07:12:54   作者:学习中的小亮  
文章介绍了在Vue中操作select元素并实时获取选中的option值的方法,通过使用`@change`事件并传递参数,可以实现动态获取选中的值

vue操作select获取option值

如何实时的获取你选中的值 只用@change件事

@change="changeCategoryList($event)" 动态传递参数

vue操作select获取option的value值

示例

  <div id="app">
        <select name="topicCategoryId" class="article-title" id="category" @change="changeCategoryList($event)"  style="width: 180px;">
                <option  v-for="(category,index) in categoryList" v-bind:value="category.id">{{category.categoryTitle}}</option>
         </select>
   </div
  data:{
        categoryList:[{id:1,categoryTitle:"Java面试"},{id:2,categoryTitle:"Web开发"},
        {id:3,categoryTitle:"设计系统"},{id:4,categoryTitle:"框架服务"}]
     },
                
  methods: {
         changeCategoryList(event){
            console.log(event);
            var selectIndex =event.target.selectedIndex;//选中的第几个option元素 从0开始
            var options = event.target.options;//代表option组合
            
            options[selectIndex].innerHTML  //选择的值 // categoryTitle
            event.target.value;  //绑定的value值  //v-bind:value="category.id"
                                   
            console.log("options[selectIndex].innerHTML=="+options[selectIndex].innerHTML);
            console.log("event.target.value=="+event.target.value);
        }
       }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue加载读取本地txt/json等文件的实现方式

    Vue加载读取本地txt/json等文件的实现方式

    这篇文章主要介绍了Vue加载读取本地txt/json等文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中pc移动滚动穿透问题及解决

    vue中pc移动滚动穿透问题及解决

    这篇文章主要介绍了vue中pc移动滚动穿透问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue可视化表单设计器自定义组件使用方法

    vue可视化表单设计器自定义组件使用方法

    Vue前端开发中表单组件是排在前三的高频使用的组件,下面这篇文章主要给大家介绍了关于vue可视化表单设计器自定义组件使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • element中el-table局部刷新的实现示例

    element中el-table局部刷新的实现示例

    本文主要介绍了element中el-table局部刷新的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Cookbook组件形式:优化 Vue 组件的运行时性能

    Cookbook组件形式:优化 Vue 组件的运行时性能

    本文仿照Vue Cookbook 组织形式,对优化 Vue 组件的运行时性能进行阐述。通过基本的示例代码给大家讲解,需要的朋友参考下
    2018-11-11
  • vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码

    这篇文章主要介绍了vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue中slot(插槽)的介绍与使用

    vue中slot(插槽)的介绍与使用

    这篇文章主要给大家介绍了关于vue中slot(插槽)的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue3 可拖动的左右面板分割组件实现

    vue3 可拖动的左右面板分割组件实现

    最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,本文就整理一下,分享给大家,有兴趣的可以学习
    2021-06-06
  • 关于electron打包的坑

    关于electron打包的坑

    本文主要介绍了关于electron打包的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue3结合hooks开发可以注册的二次确认弹框

    vue3结合hooks开发可以注册的二次确认弹框

    这篇文章主要为大家介绍了vue3结合hooks开发可以注册的二次确认弹框,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论