快捷導(dǎo)航

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

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

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

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

html代碼如下:

通過(guò)v-model可以獲取到選中的值，如果沒(méi)值就默認(rèn)第一個(gè);如果有值就顯示有值的那個(gè)內(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中寫(xiě)如:

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

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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