前端Vue?select下拉框使用以及監(jiān)聽(tīng)事件詳解
簡(jiǎn)介
在 Vue 中,下拉框通常通過(guò) <select> 元素與一系列的 <option> 元素來(lái)創(chuàng)建。Vue 的數(shù)據(jù)綁定和指令(如 v-model 和 v-for)可以使創(chuàng)建動(dòng)態(tài)下拉框變得非常簡(jiǎn)單和靈活。下面詳細(xì)介紹如何在 Vue 中使用下拉框。
使用詳解
下拉框的基本 HTML 結(jié)構(gòu)是由 <select> 元素包圍一組 <option> 元素構(gòu)成。
在 Vue 中,v-model 指令用于創(chuàng)建雙向數(shù)據(jù)綁定。將 v-model 綁定到 <select> 元素上,可以輕松地獲取或設(shè)置下拉框的選中值。
使用 v-for 指令可以動(dòng)態(tài)生成下拉框的選項(xiàng)。這對(duì)于選項(xiàng)數(shù)據(jù)來(lái)自數(shù)組或?qū)ο髸r(shí)特別有用。
演示示例
做一個(gè)下拉框,接口返回信息key值是1、2、3一直到五,value是1分、2分一直到5分,下拉顯示vale值,示例效果如下圖

<template>
<!--div獨(dú)占一行-->
<div class="dropdown-container">
<span>評(píng)分:</span>
<select v-model="selectedNumber" class="dropdown">
<option v-for="option in options" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
(默認(rèn)滿(mǎn)分5分)
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: 5, // 用于接口調(diào)用的實(shí)際值
options: [ // 下拉框的選項(xiàng),模擬接口返回的值,包含顯示的標(biāo)簽和實(shí)際的值
{ label: '1分', value: 1 },
{ label: '2分', value: 2 },
{ label: '3分', value: 3 },
{ label: '4分', value: 4 },
{ label: '5分', value: 5 }
]
};
},
methods: {
// 你可以在這里添加一個(gè)方法來(lái)處理選項(xiàng)選擇后的操作,例如調(diào)用接口
handleSelection() {
// 使用 this.selectedValue 作為調(diào)用接口的參數(shù)
console.log("Selected value for API call:", this.selectedValue);
// 這里添加調(diào)用接口的代碼
}
},
watch: {
// 監(jiān)聽(tīng) selectedValue 的變化,以便在值改變時(shí)執(zhí)行某些操作
selectedValue(newValue) {
this.handleSelection();
}
}
};
</script>
<style>
.dropdown-container{
display: block;
margin-top: 20px;/*外邊距20px,做到獨(dú)占一行 */
}
.dropdown {
width: 25%;
}
</style>
:key="option.value" :value="option.value" 區(qū)別
:key="option.value":這個(gè)綁定在使用 v-for 創(chuàng)建列表時(shí)為 Vue 提供了一個(gè)唯一的標(biāo)識(shí)符,幫助 Vue 追蹤列表中每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素。對(duì)于 <option> 元素來(lái)說(shuō),使用 :key 并不是必須的,因?yàn)?nbsp;<option> 元素通常不涉及到復(fù)雜的更新和重用邏輯。然而,如果你的下拉選項(xiàng)可能會(huì)動(dòng)態(tài)變化(比如基于另一個(gè)選擇動(dòng)態(tài)更新),使用 :key 可以幫助 Vue 更高效地處理這些變化。
:value="option.value":這個(gè)綁定用于設(shè)置每個(gè)下拉選項(xiàng)的值。當(dāng)你選擇一個(gè)選項(xiàng)時(shí),這個(gè)值會(huì)被綁定到 v-model 指定的變量上。如果你的下拉列表中的每個(gè)選項(xiàng)都對(duì)應(yīng)一個(gè)特定的值,并且你需要在選擇選項(xiàng)時(shí)獲取這個(gè)值(例如,存儲(chǔ)在數(shù)據(jù)庫(kù)中的 ID),那么使用 :value 綁定是非常有用的。如果你沒(méi)有指定 :value,那么選中的 <option> 的內(nèi)容(即它的文本節(jié)點(diǎn))將作為選中值。
監(jiān)聽(tīng)事件
上面代碼示例中watch事件就是監(jiān)聽(tīng),通過(guò)這種方式,你可以在用戶(hù)選擇一個(gè)新的選項(xiàng)時(shí)執(zhí)行一些操作,如調(diào)用一個(gè)方法或觸發(fā)一個(gè)事件。當(dāng)然你也可以使用 @change 事件監(jiān)聽(tīng)器來(lái)響應(yīng)下拉框選項(xiàng)的變化:
<template>
<select v-model="selectedOption" @change="handleChange">
<option v-for="option in options" :key="option.value" :value="option.value">
{{ option.text }}
</option>
</select>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [ /* 選項(xiàng)數(shù)據(jù) */ ]
};
},
methods: {
handleChange(event) {
// 處理選項(xiàng)變化
console.log("Selected option changed to:", this.selectedOption);
}
}
};
</script>附:VUE select下拉框點(diǎn)擊事件沒(méi)有觸發(fā)的問(wèn)題

<Card>
<Select v-model="typeSelect" style="width:150px;float: right;z-index:999;position: relative" placeholder="請(qǐng)選擇指標(biāo)" @click="changeType()">
<Option v-for="type in typeArray" :value="type.value" :key="type.label">{{ type.label }}</Option>
</Select>
<chart-card :stats-data="playTypePie"></chart-card>
</Card> changeType:function (){
console.log('您選擇了', this.typeSelect)
},在點(diǎn)擊選擇數(shù)據(jù)類(lèi)型的時(shí)候發(fā)現(xiàn)無(wú)法觸發(fā)changeType().
@click="getDivision()"換成@click.native="getDivision()"就可以了
給vue組件綁定事件時(shí)候,必須加上native ,不然不會(huì)生效(監(jiān)聽(tīng)根元素的原生事件,使用 .native 修飾符)
總結(jié)
到此這篇關(guān)于前端Vue select下拉框使用以及監(jiān)聽(tīng)事件詳解的文章就介紹到這了,更多相關(guān)Vue select下拉框監(jiān)聽(tīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
應(yīng)用provide與inject刷新Vue頁(yè)面方法
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁(yè)面的兩種方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,多多進(jìn)步,祝大家早日升職加薪2021-09-09
基于vue+echarts實(shí)現(xiàn)柱狀圖漸變色效果(每個(gè)柱子顏色不同)
前段時(shí)間的vue項(xiàng)目中用到了echarts柱狀圖,由于UI設(shè)計(jì)稿中要求使用漸變色,并且每個(gè)柱子的顏色不同,于是做了一番研究,現(xiàn)將我的實(shí)現(xiàn)方案分享如下2024-05-05
一文詳細(xì)了解Vue?3.0中的onMounted和onUnmounted鉤子函數(shù)
Vue3.0引入了新的組件生命周期鉤子函數(shù)onMounted和onUnmounted,分別用于組件掛載后和卸載前的操作,這些鉤子函數(shù)為開(kāi)發(fā)者提供了更多靈活性,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10

