持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
表单控件的数据绑定是用v-model指令来实现的，他会根据控件类型自动选取正确的方法来更新元素。由于表单控件有不同的类型，v-model指令在不同的表单控件上应用是也会有些差异
单行文本输入框
在<input>标签中，使用value属性设置了一个初始值，用v-model指令绑定一个表达式message，对应的数据属性是message。
代码演示：
<template>
<div id="app">
<input type="text" v-model="message" value="不会显示">
<p>message:{{message}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'xaiokai'
}
}
}
</script>
运行结果：
在输入框中输入内容下面的
<p>标签里面的message值也会同时改变
多行文本输入框
多行文本输入框<textarea>标签的默认值是放在元素的开始标签和结束标签之间的，这样的话除了初次渲染的时候，文本框会显示message的值，之后message属性的改变就跟文本框没关系了、同样在文本框中输入的数据也不会影响message属性的值，这样就失去了数据双向绑定的特性了。
所以我们多行文本框还是用v-model代码演示：
<template>
<div id="app">
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'xaiokai'
}
}
}
</script>
运行结果：
复选框
复选框在单独使用和多个复选框一起使用时，v-model绑定的值一定会有所不同，对于前者，绑定的是布尔值，选中则值为true，未选中值则为false；后者绑定的是同一个数组，选中的复选框的值将被保存到数组中
代码演示：
<template>
<div id="app">
<h1>单个复选框</h1>
<input id="agreement" type="checkbox" v-model="isAgree">
<label for="agreement">{{isAgree}}</label>
<h1>多个复选框</h1>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
isAgree: false,
checkedNames: []
}
}
}
</script>
运行结果：
单选按钮
当单选按钮被选中时，v-model绑定的数据属性的值会被设置为改单选按钮的value值
代码演示：
<template>
<div id="app">
<input type="radio" id="male" value="男" v-model="gender"><label for="male">男</label>
<input type="radio" id="female" value="女" v-model="gender"><label for="female">女</label>
<br />
<span>性别： {{gender }}</span>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
gender: ''
}
}
}
</script>
运行结果：
选择框
选择框可以是单选，也可以是多选指定 <select>标签的multiple属性
因此v-model在这两种情形下的绑定值会有所不同，单选时，绑定的是选项的值 <option>标签value属性的值，多选时，绑定到一个数组，所有选项的值被保存在数组中
代码演示：
<template>
<div id="app">
<select v-model="selected">
<option disabled value="">单选项</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选项: {{ selected }}</span>
<h1>多选项</h1>
<select v-model="selecteds" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br />
<span>多选项: {{ selecteds }}</span>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
selected: '',
selecteds: []
}
}
}
</script>
运行结果：
