在Vue中，取控件值是非常常見的操作。無論是表單輸入框還是復選框、單選框，都有可能需要獲取其值。本文將介紹Vue中如何獲取各種控件的值。

<!-- input輸入框 -->
<input v-model="value" />
...
data () {
return {
value: ''
}
}
...
// 獲取值
this.value

使用v-model指令綁定數據可以輕松地將輸入框的值和Vue實例中的對應屬性綁定起來。通過訪問該屬性，即可獲取輸入框的值。

<!-- 復選框 -->
<input type="checkbox" v-model="checked" />
...
data () {
return {
checked: true
}
}
...
// 獲取值
this.checked

對于復選框，v-model同樣可以用來綁定值。此時，v-model綁定的是一個布爾值，表示復選框是否被選中。同樣地，通過訪問該屬性，即可獲取復選框的值。

<!-- 單選框 -->
<input type="radio" name="radio" value="1" v-model="selected" />
<input type="radio" name="radio" value="2" v-model="selected" />
...
data () {
return {
selected: ''
}
}
...
// 獲取值
this.selected

單選框同樣可以使用v-model來綁定值。需要注意的是，多個單選框需要使用相同的name屬性來保證它們在同一組中。此時，v-model綁定的是選中單選框的value值。同樣地，通過訪問該屬性，即可獲取單選框的值。

<!-- 下拉框 -->
<select v-model="selected">
<option value="a">選項A</option>
<option value="b">選項B</option>
</select>
...
data () {
return {
selected: ''
}
}
...
// 獲取值
this.selected

下拉框的值同樣可以使用v-model來綁定。此時，v-model綁定的是選中項的value值。同樣地，通過訪問該屬性，即可獲取下拉框的值。

<!-- 多選下拉框 -->
<select multiple v-model="selected">
<option v-for="(item, index) in options" :key="index" :value="item">{{ item }}</option>
</select>
...
data () {
return {
selected: [],
options: ['選項A', '選項B', '選項C']
}
}
...
// 獲取值
this.selected

當下拉框允許多選時，v-model綁定的是一個數組，數組中存放的是選中項的value值。同樣地，通過訪問該屬性，即可獲取多選下拉框的值。