vue操作select獲取option值方式
更新時(shí)間：2025年01月30日 07:12:54 作者：學(xué)習(xí)中的小亮
文章介紹了在Vue中操作select元素并實(shí)時(shí)獲取選中的option值的方法,通過(guò)使用`@change`事件并傳遞參數(shù),可以實(shí)現(xiàn)動(dòng)態(tài)獲取選中的值
vue操作select獲取option值
如何實(shí)時(shí)的獲取你選中的值 只用@change件事
@change="changeCategoryList($event)" 動(dòng)態(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è)計(jì)系統(tǒng)"},{id:4,categoryTitle:"框架服務(wù)"}]
},
methods: {
changeCategoryList(event){
console.log(event);
var selectIndex =event.target.selectedIndex;//選中的第幾個(gè)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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式
這篇文章主要介紹了vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue3在jsx中使用component組件方式,具有很好的 參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了詳解如何在你的Vue項(xiàng)目配置vux，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
Vue中使用create-keyframe-animation與動(dòng)畫鉤子完成復(fù)雜動(dòng)畫
這篇文章主要介紹了Vue中使用create-keyframe-animation與動(dòng)畫鉤子完成復(fù)雜動(dòng)畫，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了vue如何獲取當(dāng)前url地址加端口號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vue頁(yè)面中實(shí)現(xiàn)平滑滾動(dòng)功能
這是一個(gè)實(shí)現(xiàn)平滑滾動(dòng)的函數(shù),可以讓頁(yè)面在滾動(dòng)到指定位置時(shí)產(chǎn)生緩動(dòng)效果,本文給大家介紹了如何在在Vue頁(yè)面中實(shí)現(xiàn)平滑滾動(dòng)功能,<BR>,文中詳細(xì)的代碼講解供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue自定義全局彈窗組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue關(guān)于Element UI中的文本域換行問(wèn)題
這篇文章主要介紹了Vue關(guān)于Element UI中的文本域換行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+element+springboot實(shí)現(xiàn)文件下載進(jìn)度條展現(xiàn)功能示例
本文主要介紹了vue + element-ui + springboot 實(shí)現(xiàn)文件下載進(jìn)度條展現(xiàn)功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue修改對(duì)象的屬性值后頁(yè)面不重新渲染的實(shí)例
今天小編就為大家分享一篇vue修改對(duì)象的屬性值后頁(yè)面不重新渲染的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08