快捷導(dǎo)航

vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法

更新時(shí)間：2018年08月24日 14:06:38 作者：素燃

今天小編就為大家分享一篇vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

實(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>

拓展知識(shí)：vue獲取id以及重定向路由方法

1.獲取ID的方法：

let orderId=this.$route.query.id;

2.路由重定向方法

this.$router.push(this.$route.query.redirect || '/login')

以上這篇vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2.0在沒(méi)有dev-server.js下的本地?cái)?shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒(méi)有dev-server.js下的本地?cái)?shù)據(jù)配置方法的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-02-02
如何構(gòu)建一個(gè)Vue插件并生成npm包
這篇文章主要介紹了如何構(gòu)建一個(gè)Vue插件并生成npm包，幫助大家更好的理解和使用vue，方便以后的開發(fā)，感興趣的朋友可以了解下
2020-10-10
vuecli4中如何配置打包使用相對(duì)路徑
這篇文章主要介紹了vuecli4中如何配置打包使用相對(duì)路徑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue AST的轉(zhuǎn)換實(shí)現(xiàn)方法講解
本節(jié)，我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換，指的是對(duì)AST進(jìn)行一系列操作，將其轉(zhuǎn)換為新的AST的過(guò)程。新的AST可以是原語(yǔ)言或原DSL的描述，也可以是其他語(yǔ)言或其他DSL的描述。例如，我們可以對(duì)模板AST進(jìn)行操作，將其轉(zhuǎn)換為JavaScriptAST
2023-01-01
通過(guò)vue手動(dòng)封裝on、emit、off的代碼詳解
這篇文章主要介紹了通過(guò)vue手動(dòng)封裝on，emit，off的代碼詳解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則)
這篇文章主要介紹了element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進(jìn)行增刪改,感興趣的朋友跟隨小編一起看看吧
2024-07-07
Vue.js集成Word實(shí)現(xiàn)在線編輯功能
在現(xiàn)代Web應(yīng)用中,集成文檔編輯功能變得越來(lái)越常見,特別是在協(xié)作環(huán)境中,能夠直接在Web應(yīng)用內(nèi)編輯Word文檔可以極大地提高工作效率,本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中集成Word在線編輯功能,需要的朋友可以參考下
2024-08-08
Vue3+TypeScript實(shí)現(xiàn)二維碼生成組件
在?Web?應(yīng)用中,生成二維碼是常見的需求,本文介紹如何用?Vue3?和?TypeScript?開發(fā)一個(gè)二維碼生成組件,支持生成圖片或?canvas?形式的二維碼,并提供豐富的配置選項(xiàng),感興趣的小伙伴跟著小編一起來(lái)看看吧
2024-04-04
Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?
前幾天在vue運(yùn)行項(xiàng)目過(guò)程中報(bào)錯(cuò)了,所以下面這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法,需要的朋友可以參考下
2022-07-07
解決vue腳手架項(xiàng)目打包后路由視圖不顯示的問(wèn)題
今天小編就為大家分享一篇解決vue腳手架項(xiàng)目打包后路由視圖不顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09