🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] # 用法: * 它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 ## 限制: * 一般只能在这三种情况下使用 ``` <input> <select> <textarea> components ``` 在表单控件或者组件上创建双向绑定。 # 修饰符: ## .lazy - 取代 input 监听 change 事件 ## .number - 输入字符串转为有效的数字 ## .trim - 输入首尾空格过滤 # 1. 修饰符展示 ``` <div id="test"> <input type="text" v-model="name"> <pre>{{name}}</pre> <!-- v-model.lazy // 取代 input 监听 change 事件 即不会实时更新 v-model.trim //输入首尾空格过滤 --> </div> <script> var app = new Vue({ el:"#test", data:{ name:'whh', } }) </script> ``` # 2. input > 传统的单选按钮 ``` <label > 男 <!-- for一般填input里的id 现在直接包着可以不用填--> <input type="radio" value="male" name="sex" > </label> <label > 女 <input type="radio" value="female" name="sex" > </label> ``` > v-model 的 ``` <label > 男 <input type="radio" value="male" v-model="sex" > </label> <label > 女 <input type="radio" value="female" v-model="sex" > </label> data:{ sex:'female' } ```