我们可以用 v-model 指令在表单 input 及 textarea 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
文本输入框
<!-- 你可以通过变量 message 取到输入到文本框中的值 -->
<input v-model="message">
<p> 你输入的内容: {{message}}</p>
多行文本框
<!-- 注意这里如果在文本区域插值 (<textarea></textarea>) 并不会生效 -->
<textarea v-model="message"></textarea>
<p> 你输入的内容：{{message}}</p>
单选框
<!-- 变量 sex 就是选中项的对应的 value 值 -->
<template>
<div id="radio">
<input type="radio" id="male" value="男" v-model="sex">
<label for="male"> 男 </label>
<br>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female"> 女 </label>
<br>
<span> 选择的性别：{{sex}}</span>
</div>
</template>
<script>
new Vue({
el: '#radio',
data: {sex: '男' // 使默认选中 '男'}
})
</script>多选框
<template>
<div id='checkbox'>
<input type="checkbox" id="apple" value="苹果" v-model="fruit">
<label for="apple"> 苹果 </label>
<input type="checkbox" id="orange" value="桔子" v-model="fruit">
<label for="orange"> 桔子 </label>
<input type="checkbox" id="banana" value="香蕉" v-model="fruit">
<label for="banana"> 香蕉 </label>
<br>
<span> 选中喜欢的水果：{{fruit}}</span>
</div>
</template>
<script>
new Vue({
el: '#checkbox',
data: {fruit: ['香蕉'] // 使默认选中 '香蕉'
}
})
</script>下拉单选框
<!-- 变量 city 就是你下拉选择项的 value 值 -->
<template>
<div id="select">
<select v-model="city">
<option disabled value=""> 请选择 </option>
<option> 北京 </option>
<option> 上海 </option>
<option> 广州 </option>
<option> 深圳 </option>
<option> 杭州 </option>
</select>
<span> 你选中的城市: {{city}}</span>
</div>
</template>
<script>
new Vue({
el: '#select',
data: {selected: ''// 使默认选择' 请选择 '}
})
</script>下拉多选框
<!-- 下拉选项是动态渲染出来的，而且这里添加 multiple 表示下拉多选，那么 city 对应的值将会是数组的形式 -->
<template>
<div id="multiple-select">
<select v-model="city" multiple>
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<span> 你选中的城市: {{city}}</span>
</div>
</template>
<script>
new Vue({
el: '#multiple-select',
data: {
options: [{ text: '北京', value: '北京'},
{text: '上海', value: '上海'},
{text: '广州', value: '广州'},
{text: '深圳', value: '深圳'},
{text: '杭州', value: '杭州'}
],
selected: []}
})
</script>总结
这节我们学习了 HTML 中表单的单行文本框、多行文本框、单选框、多选框、下拉单选框、下拉多选框等元素在 vue.js 中的数据绑定，同时也学习了通过给绑定的变量赋值来控制表单元素的默认值，很简单吧。