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

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

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

vue要綁定下拉列表會稍微有點不同。

因為下拉列表不是一個標(biāo)簽?zāi)芨愕嗟摹?/p>

原生的html寫法如下

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

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

在Vue中要綁定，需要把 v-model 寫在 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 提供了一個初始值。

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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