Vue 表单输入
我们在本教程前面的 Vue 表单 和 v-model 页面上看到了一些表单输入的实例。
这个页面是 Vue 中更多表单输入实例的集合,如单选按钮、复选框、下拉列表和普通文本输入框。
单选按钮
属于同一选项的单选按钮必须具有相同的名称,以便只能选择一个单选按钮。
与 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
属性,下拉列表将展开,我们可以选择多个选项。若要选择多个选项,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 数据实例发生更改,input-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>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 表单输入 如何工作的原理。