v-model的使用

  • 表单控件在实际开发中是非常常见的,特别是对于用户信息提交,需要大量的表单
  • vue中使用v-model指令来实现表单元素和数据的双向绑定
{{message}} data(){ return { message:"" }}

  • v-model可以看成v-bind和v-on的结合
{{message}} data(){ return { message:"" }

  • v-model:radio
data(){ return{ sex:"" }}

  • v-model:checkbox
//复选框分两种情况单选和多选 //单个勾选时:v-model即为boolean值 此时value并不影响v-model //多个勾选时 //data中对应应该是一个数组 //当选某一个时,会把input中value值赋值到数组中
data(){ return { isAgree:false, hobbies:[] }}

  • v-model:select
//select中也分单个和多个选择 //单个选择时 //v-model绑定是一个值 //当我们选中option中一个时。会将对应的option的value赋给v-model绑定的值 //多选 //v-model绑定的是一个数组 //当选择多个值时,就会添加到v-model绑定的数组中

    推荐阅读