Vue 表单输入绑定，双向绑定

一、v-model 指令
用于Vue 表单双向绑定
用户Vue 组件属性双向绑定
v-model 还可以用于各种差别范例的输入，<textarea>、<select> 元素。它会根据所利用的元素主动利用对应的 DOM 属性和变乱组合：

• 文本范例的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 变乱；
  
• <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 变乱；
  
• <select> 会绑定 value property 并侦听 change 变乱。
  

二、v-model 利用案例
文本

1. 姓名：  <input type="text" v-model="student.name">

复制代码

多行文本

1. 简介：<textarea v-model="student.summary"></textarea>

复制代码

单选

1. 所属省份：
2. <template v-for="item in areas">
3.     <div>
4.     <label > <input type="radio" name="area" :value="item" v-model="student.province">{{item}}</label>
5.     </div>
6. </template>

复制代码

1. <script>
2. export default {
3.     data() {
4.         return {
5.             student: {
6.                 name: '张三',
7.                 score: 100.5,
8.                 password: ' 1234 '
9.             },
10.             age: 10.8,
11.             areas: ['济南', '聊城', '北京']
12.         }
13.     }
14. }
15. </script>

复制代码

多选

1. 多选省份：
2. <template v-for="item in areas">
3.     <div>
4.         <label> <input type="checkbox" name="checkvalue" :value="item" v-model="student.checkvalue">{{ item }}</label>
5.     </div>
6. </template>

复制代码

1. export default {
2.     data() {
3.         return {
4.             student: {
5.                 checkvalue:[]//多选框需要对应数组
6.             }
7.         }
8.     }
9. }

复制代码

下拉选择

1. 下拉选择：
2. <select v-model="student.sel">
3.     <option :value="item" v-for="item in areas">{{ item }}</option>
4. </select>

复制代码

三、v-model 修饰符
.lazy​

默认情况下，v-model 会在每次 input 变乱后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 变乱后更新数据：

1. <!-- 在 "change" 事件后同步更新而不是 "input" -->
2. <input v-model.lazy="msg" />

复制代码

.number​

如果你想让用户输入主动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

1.    <input type="number" v-model.number="student.score">

复制代码

如果该值无法被 parseFloat() 处置惩罚，那么将返回原始值。特殊是当输入为空时 (比方用户清空输入字段之后)，会返回一个空字符串。
留意：要订定type=number html属性
.trim​

如果你想要默认主动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

1.     <input v-model.number="student.password">

复制代码