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

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

這篇文章主要介紹了vue中動態(tài)select的使用方法,結(jié)合實例形式分析了vue.js使用動態(tài)select創(chuàng)建下拉菜單相關(guān)實現(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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-11-11
Vue.js中自定義Markdown插件實現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個插件來解析<references>標簽,并將其轉(zhuǎn)換為HTML,這種方法可以應(yīng)用于其他自定義標簽和功能,為Vue.js應(yīng)用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧
2024-07-07
詳解Vue如何手寫虛擬dom并進行渲染
這篇文章主要為大家詳細介紹了渲染器的工作原理,以及如何將真實dom或者組件用虛擬dom的形式進行描述并渲染,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
vuex的核心概念和基本使用詳解
這篇文章主要為大家介紹了vuex的核心概念和基本使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
Vue通過for循環(huán)隨機生成不同的顏色或隨機數(shù)的實例
今天小編就為大家分享一篇Vue通過for循環(huán)隨機生成不同的顏色或隨機數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue生命周期深入分析總結(jié)
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new?Vue()?開始就是vue生命周期的開始。Vue?實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom?->?渲染、更新?->?渲染、卸載?等?系列過程,稱這是Vue的?命周期
2022-08-08
vue3-HOOKS模塊化處理方式
這篇文章主要介紹了vue3-HOOKS模塊化處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue.js 左側(cè)二級菜單顯示與隱藏切換的實例代碼
這篇文章主要介紹了vue.js 左側(cè)二級菜單顯示與隱藏切換的實例代碼,需要的朋友可以參考下
2017-05-05
Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題
這篇文章主要介紹了Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue3使用mitt進行組件通信的步驟
這篇文章主要介紹了Vue3使用mitt進行組件通信的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-05-05