我們都知道，在表單中需要選擇選項的時候，我們通常使用的是下拉菜單，這個下拉菜單中需要設(shè)置默認(rèn)值，以及在選擇不同選項時，獲取對應(yīng)的選項值。在Vue中也提供了相應(yīng)的組件——select組件。
select組件是在HTML中使用
<select v-model="selected">
<option disabled value="">請選擇</option>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>在上面的代碼中，我們定義了一個select組件，使用了v-model指令來綁定選中的值（selected），同時使用了v-for指令生成多個option選項，其中option的值和文本內(nèi)容分別綁定了option.value和option.text兩個屬性。
在Vue中，我們可以使用computed屬性來獲取select組件中選中項的文本內(nèi)容。下面的代碼展示了如何通過computed屬性實現(xiàn)：
computed: {
selectedText: function () {
for (var i = 0; i < this.options.length; i++) {
if (this.options[i].value === this.selected) {
return this.options[i].text;
}
}
return '';
}
}在上面的代碼中，我們定義了一個computed屬性selectedText，通過this.selected來獲取select組件中選中的值，然后遍歷this.options數(shù)組找到對應(yīng)的選項文本內(nèi)容，最后返回選項文本內(nèi)容。
除了使用computed屬性來獲取選中項的文本內(nèi)容以外，我們還可以使用watch屬性來監(jiān)聽選中項變化，實現(xiàn)自定義回調(diào)函數(shù)。下面的代碼展示了如何使用watch屬性實現(xiàn)：
watch: {
selected: function (newVal, oldVal) {
console.log('new value: ' + newVal + ', old value: ' + oldVal);
}
}在上面的代碼中，我們定義了一個watch屬性來監(jiān)聽選中項的變化，在選中項發(fā)生變化時，自定義回調(diào)函數(shù)會輸出新值和舊值。
至此，我們已經(jīng)學(xué)習(xí)了如何在Vue中使用select組件實現(xiàn)下拉菜單，并且獲取選中項的值和文本內(nèi)容。在實際開發(fā)中，這個功能非常常用，希望大家能夠掌握使用方法，熟練應(yīng)用于項目中。