vue中常用到的html控件有：

input

textarea

select

對于普通的文本框，可以直接使用v-model雙向綁定來獲取值：

// html代碼
<input type="text" v-model="inputValue">
// vue實例代碼
data: {
inputValue: ''
}

對于多行文本框，同樣可以使用v-model來獲取值：

// html代碼
<textarea v-model="textareaValue"></textarea>
// vue實例代碼
data: {
textareaValue: ''
}

對于下拉框，可以在選項中設置value屬性來指定值，然后使用v-model雙向綁定來獲取選擇項的value值：

// html代碼
<select v-model="selected">
<option value="option1">選項1</option>
<option value="option2">選項2</option>
<option value="option3">選項3</option>
</select>
// vue實例代碼
data: {
selected: ''
}

如果需要獲取用戶輸入框選中的文本，在vue中可以使用v-on綁定input事件和selectionchange事件，然后結合window.getSelection()方法和document.activeElement屬性來獲取選中的文本值：

// html代碼
<input type="text" v-on:input="onInput" v-on:selectionchange="onSelectionChange" />
// vue實例代碼
methods: {
onInput: function(e) {
this.selectionStart = e.target.selectionStart;
this.selectionEnd = e.target.selectionEnd;
},
onSelectionChange: function() {
var text = window.getSelection().toString();
if (text && document.activeElement.nodeName === 'INPUT') {
this.selectedText = text;
}
}
}

掌握以上方法，就可以方便地獲取vue中各種html控件的值了。