下拉框是一種常見的表單元素，可以用來從多個選項中選擇一個。在Vue中，我們可以使用v-model指令和v-for指令來簡易地實現下拉框的功能。本文將介紹如何使用Vue和v-model指令實現下拉框，并獲取所選項的name。

首先，在Vue文件中，我們需要定義一個data屬性來存儲下拉框的選項和所選項的值。

data() {
return {
selected: '',
options: [
{ value: '1', name: '選項1'},
{ value: '2', name: '選項2'},
{ value: '3', name: '選項3'}
]
}
}

在這里，我們定義了一個selected屬性來存儲所選項的值，以及一個options數組來存儲下拉框的選項。每個選項都包含一個value屬性和一個name屬性，用于存儲其值和名稱。

接下來，我們需要在模板中使用v-model指令來綁定所選項的值。

<select v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.name }}</option>
</select>

在這里，我們使用了v-for指令來循環遍歷options數組，并為每個選項生成一個option標簽。在option標簽中，我們用:value屬性來綁定選項的值，用{{ option.name }}來渲染選項的名稱。最后，我們使用v-model指令來綁定所選項的值到selected屬性上。

現在，當用戶選擇下拉框中的選項時，所選項的值將自動綁定到selected屬性上。我們可以在Vue實例中定義一個方法，并在所選項的值變化時調用它來獲取所選項的名稱。

methods: {
getName() {
let name = '';
this.options.forEach(option =>{
if (option.value === this.selected) {
name = option.name;
}
});
return name;
}
},
watch: {
selected: function() {
console.log(this.getName());
}
}

在這里，我們定義了一個getName方法來遍歷options數組，并查找與所選項的值匹配的選項名稱。然后，我們在Vue實例中使用一個watch監聽selected屬性的變化，并在變化時調用getName方法來獲取所選項的名稱。

現在，我們就可以使用Vue和v-model指令，輕松地實現下拉框的功能，并獲取所選項的名稱了。除此之外，Vue還提供了許多其他有用的指令和功能，可以幫助我們輕松地構建復雜的Web應用程序。