V-Model与表单

461 阅读2分钟

基本用法

VUE提供了v-model指令,用于在表单类元素上双向绑定事件。

input和textarea

可以用于input和textarea 注意:所显示的值只依赖于所绑定的数据,不再关心初始化时的插入value 代码链接:js.jirengu.com/wogecakoro/… 备注:

  • 1.v-model是双向绑定,input里面输入什么,data中的value就会被赋值什么,并渲染到页面上。
  • 2.若不加v-model=""msg>,多文本框里会出现默认的文字,然而现在显示的值只依赖于所绑定的数据,不再关心初始化的插入的value

单选按钮

  1. 单个单选按钮,直接用v-bind绑定布尔值,用v-model是不可以的;
  2. 如果是组合使用,就需要V-model来配合value使用,绑定选中的单选框的value值,此处所绑定的初始值可以随意给;
  3. 单选框的name值一样的话,就只能选择一个按钮;如果name为空的话,可以选择多个。
  4. 单选框的v-model绑定了checkname,选中了哪一个,就会赋值给data中的checkname,就会渲染到页面里面;
  5. 链接和上面的一样。

复选框:

1.单个单选框,直接用一个布尔值,可以用v-Model。可以用v-bind; 2.多个复选框,如果是组合使用,就需要v-model来配合value使用,v-model绑定一个数组,如果绑定的是字符串,则会转化为true,false,与所有绑定的复选框的checked属性相对应。 3. 复选框的v-model,绑定了checks,选中了哪一个,就会以数组的形式赋值给data中的checks,所以data中要写成数组的形式,就会渲染到页面里面;

下拉框

如果是单选,初始化最好给定字符串,因为-model此时绑定的是静态字符串或者布尔值,如果是多选,初始化最好给定一个数组。

6.2绑定值

单选按钮 只需要用v-bind给单个单选框绑定一个value值,此时,v-model绑定的就是他的value值 复选框 选中和不选中的value值不一样。 下拉框 在select标签上绑定value值对option并没有影响

修饰符

lazy v-model默认是在input输入时实时同步输入框的数据,而lazy修饰符,可以使其在失去焦点或者敲回车键之后在更新 修饰符----
------{{inputStr}} 加了.lazy,不会立马出现在后面{{}},而是等到输入完后 number 将输入的字符串转化为number类型 ------{{typeof isNum}} 在v-model后面加上.number,里面的类型,会自动转换成number,其余的则会使string trim trim自动过滤输入过程中首尾输入的空格。 trim修饰符:


------{{trimStr.split('').length}} http://js.jirengu.com/nuwubaguba/1/edit?html,output

完整版链接:js.jirengu.com/nuwubaguba/… js.jirengu.com/kipafexiye/…