Vue 表单输入
复选框
当复选框输入 (<input type="checkbox">) 使用 v-model 连接到同一数组时，选中的复选框的值将收集在该数组中:
示例
App.vue:
<template>
<h1>Checkbox Inputs in Vue</h1>
<form @submit.prevent="registerAnswer">
<p>你喜欢什么类型的食物?</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 属性，下拉列表变得展开，我们可以选择多个选项。
要选择多个选项，Windows 用户必须按"ctrl"键，macOS 用户必须按"command"键。
在Vue中使用 <select multiple> 时，我们需要将 <select> 标签与 v-model 连接起来，并为 <option> 标签赋值:
示例
App.vue:
<template>
<h1>在 Vue 中选择多个</h1>
<p>根据您的操作系统，使用"ctrl"或"command"键选择多个选项。</p>
<form @submit.prevent="registerAnswer">
<label for="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">，无法从 Vue 数据实例更改 value 属性，因此我们不能使用 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>你有多高?<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>选择颜色:
<input v-model="colorInp" type="color">
</label>
<button type="submit">Submit</button>
</form>
这就是如何在 Vue 中使用 <textarea>:
示例
App.vue:
<form @submit.prevent="registerAnswer">
<label>
<p>您觉得我们的产品怎么样?</p>
<textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
</label>
<button type="submit">Submit</button>
</form>
在我们的 HTML 教程中详细了解不同类型的 HTML 表单输入的工作原理。
