详解Vue(13)——Form表单(v-model)

一、文本


  
username:
结果

二、多行文本


  
描述:
结果

三、复选框


  
爱好: 吃饭 睡觉 打豆豆
结果

四、单选按钮


  
性别:
结果

五、选择框


  
![star.gif](https://upload-images.jianshu.io/upload_images/20318787-fffd11c98177a573.gif?imageMogr2/auto-orient/strip) 城市:
![![star.gif](https://upload-images.jianshu.io/upload_images/20318787-e474d9ed53ec43d9.gif?imageMogr2/auto-orient/strip) ](https://upload-images.jianshu.io/upload_images/20318787-05a093716573a5c4.gif?imageMogr2/auto-orient/strip)
结果

六、多选框


  
城市:
结果

七、多选框(多选)


  
城市:
结果

八、模拟从数据库里面找数据


  
城市:
结果

九、值绑定


  
结果

十、修饰符——登录(注册)基础逻辑

.lazy:

阻止v-model 在每次 input 事件触发后将输入框的值与数据进行同步

.number

给 v-model 添加 number 修饰符,可以自动将用户的输入值转为数值类型

.trim`

v-model 添加 trim 修饰符,可以自动过滤用户输入的首尾空白字符


  

{{username}}

username: age: msg:
结果

你可能感兴趣的:(详解Vue(13)——Form表单(v-model))