vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法
實(shí)際項(xiàng)目中我們獲取選擇的數(shù)據(jù)的id;這時(shí)候 需要配合使用v-bind,才能獲取到選擇的那條數(shù)據(jù)的id值,其實(shí)就是id賦值給value屬性
<template> <div> <select v-model="select" > <option v-for="(a,index) in arr" :key="index" :value="a.id">{{ a.name }}</option> </select> <p>您選擇的名字的Id是:{{select}}</p> </div> </template>
js代碼
<script> export default { data(){ return{ select:'', arr:[ {id:'1',name:'html'}, {id:'2',name:'css'}, {id:'3',name:'js'}, ] } } } </script>
拓展知識:vue獲取id以及重定向路由方法
1.獲取ID的方法:
let orderId=this.$route.query.id;
2.路由重定向方法
this.$router.push(this.$route.query.redirect || '/login')
以上這篇vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- Vue下拉選擇框Select組件使用詳解(一)
- ant design vue中日期選擇框混合時(shí)間選擇器的用法說明
- Vue表單綁定的實(shí)例代碼(單選按鈕,選擇框(單選時(shí),多選時(shí),用 v-for 渲染的動態(tài)選項(xiàng))
- 在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法
- vue select選擇框數(shù)據(jù)變化監(jiān)聽方法
- vuejs實(shí)現(xiàn)下拉框菜單選擇
- 在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)
- vue Treeselect下拉樹只能選擇第N級元素實(shí)現(xiàn)代碼
- vue省市區(qū)三聯(lián)動下拉選擇組件的實(shí)現(xiàn)
- Vue下拉選擇框Select組件使用詳解(二)
相關(guān)文章
解決axios發(fā)送post請求返回400狀態(tài)碼的問題
今天小編就為大家分享一篇解決axios發(fā)送post請求返回400狀態(tài)碼的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08element的el-tree多選樹(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)
最近想要實(shí)現(xiàn)多選框關(guān)聯(lián)的功能,但是卻出現(xiàn)了element的el-tree多選樹(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)的問題,本文就來介紹一下解決方法,一起來了解一下2021-05-05Vue的export?default和帶返回值的data()及@符號的用法說明
這篇文章主要介紹了Vue的export?default和帶返回值的data()及@符號的用法說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03elementui實(shí)現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動的示例代碼
多級聯(lián)動是一種常見的交互方式,本文主要介紹了elementui實(shí)現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個個來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧2024-07-07vue項(xiàng)目中js文件使用vue的this實(shí)例說明
這篇文章主要介紹了vue項(xiàng)目中js文件使用vue的this實(shí)例說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12