vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法
更新時間:2018年08月24日 14:06:38 作者:素燃
今天小編就為大家分享一篇vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
實際項目中我們獲取選擇的數(shù)據(jù)的id;這時候 需要配合使用v-bind,才能獲取到選擇的那條數(shù)據(jù)的id值,其實就是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方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue下拉選擇框Select組件使用詳解(一)
- ant design vue中日期選擇框混合時間選擇器的用法說明
- Vue表單綁定的實例代碼(單選按鈕,選擇框(單選時,多選時,用 v-for 渲染的動態(tài)選項)
- 在vue中實現(xiàn)點擊選擇框阻止彈出層消失的方法
- vue select選擇框數(shù)據(jù)變化監(jiān)聽方法
- vuejs實現(xiàn)下拉框菜單選擇
- 在vue中使用cookie記住用戶上次選擇的實例(本次例子中為下拉框)
- vue Treeselect下拉樹只能選擇第N級元素實現(xiàn)代碼
- vue省市區(qū)三聯(lián)動下拉選擇組件的實現(xiàn)
- Vue下拉選擇框Select組件使用詳解(二)
相關文章
解決axios發(fā)送post請求返回400狀態(tài)碼的問題
今天小編就為大家分享一篇解決axios發(fā)送post請求返回400狀態(tài)碼的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08element的el-tree多選樹(復選框)父子節(jié)點關聯(lián)不關聯(lián)
最近想要實現(xiàn)多選框關聯(lián)的功能,但是卻出現(xiàn)了element的el-tree多選樹(復選框)父子節(jié)點關聯(lián)不關聯(lián)的問題,本文就來介紹一下解決方法,一起來了解一下2021-05-05Vue的export?default和帶返回值的data()及@符號的用法說明
這篇文章主要介紹了Vue的export?default和帶返回值的data()及@符號的用法說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03elementui實現(xiàn)標簽頁與菜單欄聯(lián)動的示例代碼
多級聯(lián)動是一種常見的交互方式,本文主要介紹了elementui實現(xiàn)標簽頁與菜單欄聯(lián)動的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-06-06