表单输入绑定
学习：v-model
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量
<input :value="text" @input="event => text = event.target.value">
v-model 指令帮我们简化了这一步骤：
<input v-model="text">
v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：
- 文本类型的
<input>和<textarea>元素会绑定valueproperty 并侦听input事件； <input type="checkbox">和<input type="radio">会绑定checkedproperty 并侦听change事件；<select>会绑定valueproperty 并侦听change事件
v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。
完整案例： 02_template/14_model.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单的输入绑定</title> </head> <body> <div id="app"> <!-- v-model --> <div> <!-- .lazy input ===> change .number 输出数字 .trim 去除空格 --> <!-- value input --> 用户名： <input type="text" v-model.trim="userName"> {{ userName }} </div> <div> <!-- value change --> 密码： <input type="text" v-model.lazy="password"> {{ password }} </div> <div> 年龄： <input type="text" v-model.number="age"> {{ age }} </div> <div> 喜欢的颜色： <input type="color" v-model="color"> {{ color }} </div> <div> 资料完整度： <input type="range" min="0" max="100" v-model="rating"> {{ rating }} </div> <!-- checked change --> <div> 性别： <input type="radio" name="sex" v-model="sex" value="男"/>男 <input type="radio" name="sex" v-model="sex" value="女"/>女 --- {{ sex }} </div> <div> 爱好： <input type="checkbox" name="hobby" v-model="hobby" value="🏀"/>🏀 <input type="checkbox" name="hobby" v-model="hobby" value="⚽️"/>⚽️ <input type="checkbox" name="hobby" v-model="hobby" value="🏓️"/>🏓️ <input type="checkbox" name="hobby" v-model="hobby" value="🎱"/>🎱 <input type="checkbox" name="hobby" v-model="hobby" value="🏸️"/>🏸️ - {{ hobby }} </div> <!-- value change --> <div> 阶段 <select v-model="lesson"> <option value="" disabled>请选择</option> <!-- 兼容 --> <option value="1阶段">1阶段</option> <option value="2阶段">2阶段</option> <option value="3阶段">3阶段</option> </select> -- {{ lesson }} </div> <div> 备注 <textarea v-model="note"></textarea> {{ note }} </div> <!-- checkbox 数组 --- 多选 boolean ---- 开关 --> <input type="checkbox" v-model="flag"> 同意*****协议 -- {{ flag }} </div> </body> <script src="../lib/vue.global.js"></script> <script> Vue.createApp({ data () { return { userName: '', password: '', age: 20, color: '#ff666', rating: 50, sex: '男', hobby: ['🏀'], lesson: "3阶段", note: '', flag: false } } }).mount('#app') </script> </html>
如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项
修饰符
.lazy input — change
.number — 输出的为数字
.trim ---- 去除两端的空格
