Vue 表單輸入
單選按鈕
屬於同一組選擇的單選按鈕必須具有相同的 name，這樣才能只選擇一個單選按鈕。
與 Vue 中的所有輸入一樣，我們使用 v-model 來捕獲單選按鈕的輸入值，但 value 屬性也必須在 <input type="radio"> 標籤上顯式設定。
這是我們在 Vue 表單中使用單選按鈕的方法
示例
App.vue:
<template>
<h1>Radio Buttons in Vue</h1>
<form @submit.prevent="registerAnswer">
<p>What is your favorite animal?</p>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> Cat
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> Dog
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> Turtle
</label>
<label>
<input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> Moose
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted choice:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inpVal: '',
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.inpVal) {
this.inpValSubmitted = this.inpVal;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
display: block;
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
複選框
當複選框輸入 (<input type="checkbox">) 與 v-model 連線到同一個陣列時，選中的複選框的值將被收集到該陣列中
示例
App.vue:
<template>
<h1>Checkbox Inputs in Vue</h1>
<form @submit.prevent="registerAnswer">
<p>What kinds of food do you like?</p>
<label>
<input type="checkbox" v-model="likeFoods" value="Pizza"> Pizza
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Rice"> Rice
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Fish"> Fish
</label>
<label>
<input type="checkbox" v-model="likeFoods" value="Salad"> Salad
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
likeFoods: [],
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
this.inpValSubmitted = this.likeFoods;
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
display: block;
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
下拉列表
下拉列表由一個 <select> 標籤和一個內部的 <option> 標籤組成。
在 Vue 中使用下拉列表時，我們需要將 <select> 標籤與 v-model 連線，併為 <option> 標籤設定值
示例
App.vue:
<template>
<h1>Drop-down List in Vue</h1>
<form @submit.prevent="registerAnswer">
<label for="cars">Choose a car:</label>
<select v-model="carSelected" id="cars">
<option disabled value="">Please select one</option>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
carSelected: '',
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.carSelected) {
this.inpValSubmitted = this.carSelected;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
}
label {
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
<select multiple>
使用 <select> 標籤中的 multiple 屬性，下拉列表會展開，我們可以選擇多個選項。
要選擇多個選項，Windows 使用者必須按 'ctrl' 鍵，macOS 使用者必須按 'command' 鍵。
在 Vue 中使用 <select multiple> 時，我們需要將 <select> 標籤與 v-model 連線，併為 <option> 標籤設定值
示例
App.vue:
<template>
<h1>Select Multiple in Vue</h1>
<p>Depending on your operating system, use the 'ctrl' or the 'command' key to select multiple options.</p>
<form @submit.prevent="registerAnswer">
<label for="cars">Choose one or more cars:</label><br>
<select v-model="carsSelected" id="cars" multiple>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
<option>Kia</option>
</select>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
carsSelected: [],
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.carsSelected) {
this.inpValSubmitted = this.carsSelected;
}
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button, select {
margin: 10px;
display: block;
}
label {
width: 80px;
padding: 5px;
}
label:hover {
cursor: pointer;
background-color: rgb(211, 244, 211);
border-radius: 5px;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
只讀表單輸入
在表單輸入上使用 v-model 會建立一個雙向繫結，這意味著如果 Vue 的資料例項發生更改，輸入 value 屬性也會更改。
對於只讀表單輸入，例如 <input type="file">，value 屬性無法從 Vue 資料例項更改，因此我們無法使用 v-model。
對於只讀表單輸入，例如 <input type="file">，我們需要使用 @change 呼叫一個方法來更新 Vue 資料例項
示例
App.vue:
<template>
<h1>Input Type File</h1>
<form @submit.prevent="registerAnswer">
<label>Choose a file:
<input @change="updateVal" type="file">
</label>
<button type="submit">Submit</button>
</form>
<div>
<h3>Submitted answer:</h3>
<p id="pAnswer">{{ inpValSubmitted }}</p>
</div>
</template>
<script>
export default {
data() {
return {
fileInp: null,
inpValSubmitted: 'Not submitted yet'
}
},
methods: {
registerAnswer() {
if(this.fileInp) {
this.inpValSubmitted = this.fileInp;
}
},
updateVal(e) {
this.fileInp = e.target.value;
}
}
}
</script>
<style scoped>
div {
border: dashed black 1px;
border-radius: 10px;
padding: 0 20px 20px 20px;
margin-top: 20px;
display: inline-block;
}
button {
margin: 10px;
display: block;
}
#pAnswer {
background-color: lightgreen;
padding: 5px;
}
</style>
資訊：在上面的示例中，提交的檔名前面會加上一個檔案路徑 C:\fakepath\。這是為了防止惡意軟體猜測使用者的 檔案結構。
其他表單輸入
對於上面提到的表單輸入，我們需要為 value 屬性提供一個值，但對於下面的表單輸入，由使用者提供值
<input type="color"><input type="date"><input type="datetime-local"><input type="number"><input type="password"><input type="range"><input type="search"><input type="tel"><input type="text"><input type="time"><textarea>
因為使用者已經為這些型別的表單輸入提供了值，所以我們在 Vue 中需要做的就是使用 v-model 將輸入連線到資料屬性。
這是如何在 Vue 中使用 <input type="range">
示例
App.vue:
<form @submit.prevent="registerAnswer">
<label>How tall are you?<br>
<input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm
</label>
<button type="submit">Submit</button>
</form>
而這是如何在 Vue 中使用 <input type="color">
示例
App.vue:
<form @submit.prevent="registerAnswer">
<label>Choose a color:
<input v-model="colorInp" type="color">
</label>
<button type="submit">Submit</button>
</form>
而這是如何在 Vue 中使用 <textarea>
示例
App.vue:
<form @submit.prevent="registerAnswer">
<label>
<p>What do you think about our product?</p>
<textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
</label>
<button type="submit">Submit</button>
</form>
在 我們的 HTML 教程 中瞭解更多關於不同型別的 HTML 表單輸入的工作方式。
