vue中動態(tài)select的使用方法示例

更新時間：2019年10月28日 11:28:52 作者：周家大小姐.

這篇文章主要介紹了vue中動態(tài)select的使用方法,結合實例形式分析了vue.js使用動態(tài)select創(chuàng)建下拉菜單相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下

本文實例講述了vue中動態(tài)select的使用方法。分享給大家供大家參考，具體如下：

html代碼如下:

通過v-model可以獲取到選中的值，如果沒值就默認第一個;如果有值就顯示有值的那個內(nèi)容

<template>
  <div class="violationsList">
    <div class="type-select">
      <select name="selected" id="" v-model="selected" @change="getTypeSelected">
        <option :value="types.id" v-for="types in typeList" >{{types.name}}</option> 
      </select>
    </div>
  </div>
</template>

js中寫如:

<script>
export default {
  data(){
    return{
      typeList:[
        {id:1,name:'違規(guī)類型'},
        {id:2,name:'無人值守'},
        {id:3,name:'蒙頭睡覺'},
      ],
      selected:''
    }
  },
  created(){
　　　　　　　//如果沒有這句代碼，select中初始化會是空白的，默認選中就無法實現(xiàn)
    this.selected = this.typeList[0].id;
  },
  methods:{
    getTypeSelected(){
      //獲取選中的違規(guī)類型
      console.log(this.selected)
    }
  }
}
</script>

希望本文所述對大家vue.js程序設計有所幫助。

您可能感興趣的文章:

Vite打包優(yōu)化之縮小打包體積實現(xiàn)詳解
這篇文章主要為大家介紹了使用Vite縮小打包體積如何實現(xiàn)的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
vue中父組件通過props向子組件傳遞數(shù)據(jù)但子組件接收不到解決辦法
大家都知道可以使用props將父組件的數(shù)據(jù)傳給子組件,下面這篇文章主要給大家介紹了關于vue中父組件通過props向子組件傳遞數(shù)據(jù)但子組件接收不到的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
通過命令行生成vue項目框架的方法
本篇文章主要介紹了通過命令行生成vue項目框架的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
解決vue更新路由router-view復用組件內(nèi)容不刷新的問題
今天小編就為大家分享一篇解決vue更新路由router-view復用組件內(nèi)容不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
nuxt3中server routes的使用詳解
本文主要介紹了nuxt3中server routes的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
Vue中如何實現(xiàn)輪播圖的示例代碼
本篇文章主要介紹了Vue中如何實現(xiàn)輪播圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue組件通信中非父子組件傳值知識點總結
在本篇文章里小編給大家整理的是關于Vue組件通信中非父子組件傳值知識點總結，有興趣的朋友們學習下。
2019-12-12
vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設計和強大的生態(tài)系統(tǒng)成為了越來越多開發(fā)者選擇Vue的原因,在實際項目過程中一個高效的開發(fā)環(huán)境能夠大大提高開發(fā)效率,這篇文章主要給大家介紹了關于vscode搭建vue環(huán)境的相關資料,需要的朋友可以參考下
2023-10-10
Vue樹表格分頁的實現(xiàn)方法詳解
這篇文章主要介紹了Vue樹表格分頁的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-10-10
vue input輸入框模糊查詢的示例代碼
本篇文章主要介紹了vue input輸入框模糊查詢的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05