快捷導(dǎo)航

Vue表單之v-model綁定下拉列表功能

更新時(shí)間：2019年05月14日 08:51:29 作者：Rabbit_svip

這篇文章主要介紹了Vue表單之v-model綁定下拉列表功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue要綁定下拉列表會(huì)稍微有點(diǎn)不同。

因?yàn)橄吕斜聿皇且粋€(gè)標(biāo)簽?zāi)芨愕嗟摹?/p>

原生的html寫(xiě)法如下

<select>
 <option value="Vue.js">Vue.js</option>
 <option value="React.js">React.js</option>
 <option value="Angular.js">Angular.js</option>
</select>

通常下拉列表會(huì)用到兩個(gè)標(biāo)簽， <select> 和 <option> 。

在Vue中要綁定，需要把 v-model 寫(xiě)在 select 標(biāo)簽里。

代碼如下

<template>
 <div id="app">
 <select v-model="selectCurriculums">
  <option v-for="(curriculum, index) in curriculums" :key="index">{{curriculum}}</option>
 </select>

 <span>{{selectCurriculums}}</span>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
 return {
  selectCurriculums: 'React.js',
  curriculums: ['Vue.js', 'React.js', 'Angular.js']
 }
 }
}

curriculums 是初始化數(shù)組，提供值給 option 。

selectCurriculums 提供了一個(gè)初始值。

每當(dāng)選中一個(gè) <option> ，就會(huì)對(duì)應(yīng)的更新 selectCurriculums 的數(shù)據(jù)。

總結(jié)

以上所述是小編給大家介紹的Vue表單之v-model綁定下拉列表,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

Vue $nextTick 為什么能獲取到最新Dom源碼解析
這篇文章主要為大家介紹了Vue $nextTick 為什么能獲取到最新Dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
Vue請(qǐng)求JSON Server服務(wù)器數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue請(qǐng)求JSON Server服務(wù)器數(shù)據(jù)的實(shí)現(xiàn)方法,需要的朋友可以參考下
2018-11-11
vue-scroller記錄滾動(dòng)位置的示例代碼
本篇文章主要介紹了vue-scroller記錄滾動(dòng)位置的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue組件之間通信實(shí)例總結(jié)(點(diǎn)贊功能)
這篇文章主要介紹了vue組件之間通信,結(jié)合實(shí)例形式分析了vue父子組件、兄弟組件之間通信的原理、實(shí)現(xiàn)方法,并給出了一個(gè)類似點(diǎn)贊功能的總結(jié)實(shí)例,需要的朋友可以參考下
2018-12-12
使用Vue開(kāi)發(fā)登錄頁(yè)面的完整指南
Vue.js 是一個(gè)流行的前端JavaScript框架,用于構(gòu)建用戶界面,在這個(gè)"vue網(wǎng)頁(yè)登錄界面"的示例中,我們探討的是如何使用Vue.js創(chuàng)建一個(gè)簡(jiǎn)單的登錄頁(yè)面,感興趣的小伙伴跟著小編一起來(lái)看看吧
2025-04-04
第一個(gè)Vue插件從封裝到發(fā)布
這篇文章主要為大家詳細(xì)介紹了第一個(gè)Vue插件從封裝到發(fā)布的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
淺談Vue.js中的v-on(事件處理)
本篇文章主要介紹了Vue.js中的v-on(事件處理)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
vue實(shí)現(xiàn)引入本地json的方法分析
這篇文章主要介紹了vue實(shí)現(xiàn)引入本地json的方法,結(jié)合實(shí)例形式分析了vue.js加載本地json文件及解析json數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
淺析vue-router中params和query的區(qū)別
這篇文章主要介紹了vue-router中params和query的區(qū)別，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-12-12