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