vue操作select獲取option值方式
更新時間：2025年01月30日 07:12:54 作者：學(xué)習(xí)中的小亮
文章介紹了在Vue中操作select元素并實(shí)時獲取選中的option值的方法,通過使用`@change`事件并傳遞參數(shù),可以實(shí)現(xiàn)動態(tài)獲取選中的值
vue操作select獲取option值
如何實(shí)時的獲取你選中的值 只用@change件事
@change="changeCategoryList($event)" 動態(tài)傳遞參數(shù)
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開發(fā)"},
{id:3,categoryTitle:"設(shè)計系統(tǒng)"},{id:4,categoryTitle:"框架服務(wù)"}]
},
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);
}
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue中pc移動滾動穿透問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue前端開發(fā)中表單組件是排在前三的高頻使用的組件,下面這篇文章主要給大家介紹了關(guān)于vue可視化表單設(shè)計器自定義組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
element中el-table局部刷新的實(shí)現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Cookbook組件形式：優(yōu)化 Vue 組件的運(yùn)行時性能
本文仿照Vue Cookbook 組織形式，對優(yōu)化 Vue 組件的運(yùn)行時性能進(jìn)行闡述。通過基本的示例代碼給大家講解，需要的朋友參考下2018-11-11
vue19 組建 Vue.extend component、組件模版、動態(tài)組件 的實(shí)例代碼
這篇文章主要介紹了vue19 組建 Vue.extend component、組件模版、動態(tài)組件 的實(shí)例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要給大家介紹了關(guān)于vue中slot（插槽）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue3 可拖動的左右面板分割組件實(shí)現(xiàn)
最近在使用vue的時候,遇到一個需求,實(shí)現(xiàn)左右div可通過中間部分拖拽調(diào)整寬度，本文就整理一下，分享給大家，有興趣的可以學(xué)習(xí)2021-06-06
本文主要介紹了關(guān)于electron打包的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框
這篇文章主要為大家介紹了vue3結(jié)合hooks開發(fā)可以注冊的二次確認(rèn)彈框，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12