Vue 表单与 v-model

表单与 v-model

基本用法

Vue.js 提供了v-model指令, 用于在表单类元素上双向绑定数据

• input
  • 对于汉字如果需要实时更新的话可以使用@input来替代v-model
  • 代码链接在这儿!!

代码链接在这儿!!

• textarea
  • 不再关心初始化时 value 属性

代码链接在这儿!!

• 单选按钮input:radio
  • 单独使用的时候不需要使用v-model, 只需要单向绑定一个数据到checked属性上即可
  • 代码链接在这儿!!
  • 互斥的效果的话则需要使用v-model
  • 代码链接在这儿!!
• 复选框input:checkbox
  • 单独使用的时候v-model
  • 代码链接在这儿
  • 多个一起使用的时候类似于单选框
    • 代码链接在这儿
    • 绑定到一个数组里面
      • 选中 => push
      • 没选中 => splice
• 选择列表 select-option
  • 单选和多选
  • 代码链接在这儿!!
    • 设置了value
      • v-model 绑定了 option 元素上的 value
    • 没设置value
      • v-model 绑定了 option 元素上的 text
  • 与v-for结合, text 和 value 也通过v-bind 绑定到视图模型上
    • 代码链接在这儿!!

绑定值

v-model 和 v-bind 结合使用 ?

单选框

• : 和 v-model 的结合使用
  • 代码链接在这儿
  • 此时 app.picked === app.value => true

复选框

• : 和 v-model 的结合使用 TODO
  • 代码链接在这儿!!
  • 在input:checkbox 上面可以动态绑定两个属性true-value 和 false-value
    • :true-value="value1" 和 :false-value=value2
    • 选中的时候app.picked = app.value1
    • 没选中的时候 app.picked = app.value2

选择列表

TODO: 选择列表内容的编写

代码链接在这儿!!

修饰符

.lazy

• 此时v-model绑定的数据并不会实时更新, 按回车或者失焦才会更新
  • 在 change 事件中同步

.number

• 转化成数字

.trim

• 消除空格