美文网首页
第六章 表单与v-model

第六章 表单与v-model

作者: 索伯列夫 | 来源:发表于2018-10-26 20:27 被阅读0次

6.1 基本用法

v­model:

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

input和textarea

可以用于input框,以及textarea等
注意: 所显示的值只依赖于所绑定的数据,不再关心初始化时的插入的value

单选按钮:

  1. 单个单选按钮,直接用v­bind绑定一个布尔值,用v­model是不可以的
  2. 如果是组合使用,就需要v­model来配合value使用,绑定选中的单选框的value值,此处所绑定的初始值可以随意给

复选框:

  1. 单个复选框,直接用定一个布尔值,可以用v­model可以用v­bind
    2.多个复选框– 如果是组合使用,就需要v­model来配合value使用,v­model绑定一个数组—如果绑定的是字符串,则会转化为true。false,与所有绑定的复选框的checked属性相对应

下拉框:

  1. 如果是单选,所绑定的value值初始化可以为数组,也可以为字符串,有value直接优
    先匹配一个value值,没有value就匹配一个text值
  2. 如果是多选,就需要v­model来配合value使用,v­model绑定一个数组,与复选框类
  3. v­model一定是绑定在select标签上

总结一下:

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

6.2 绑定值

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

6.3 修饰符

lazy
*——v­model默认是在input输入时实时同步输入框的数据,而lazy修饰符,可以使其
在失去焦点或者敲回车键之后在更新
number
*—————— 将输入 的字符串转化为number类型
trim
trim自动过滤输入过程中收尾输入的空格

相关文章

  • 《Vue.js 实战》基础篇(下)

    本章内容:表单 与 v-model、组件、自定义指令 六、表单 与 v-model 6.1、基本用法 Vue.js...

  • Vue学习笔记(10)-数据双向绑定

    数据双向绑定:v-model 作用 v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的...

  • Vue.js教程_7

    表单输入绑定- v-model 基础语法 v-model指令在表单 、 、 元素上创建双向数据绑定。根据控件类型自...

  • 与Vue.js的第二天

    今天学习了v-model,v-on; v-model v-model是双向数据绑定,用于表单元素。v-model ...

  • Vue——v-model指令 & 事件处理 & 深度响应式

    一、v-model指令 v-model 指令在表单 、 及 元素上创建双向数据绑定。v-model 会忽略...

  • 学习Vue(表单)

    表单 以用 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法...

  • 第六章 表单与v-model

    6.1 基本用法 v­model: VUE提供了v­model指令, 用于在表单类元素上双向绑定事件 input和...

  • 第六章 表单与v-model

    6.1 基本用法 v­-model: VUE提供了v­-model指令, 用于在表单类元素上双向绑定事件。 inp...

  • 7、Vue_表单应用

    Vue在表单上的应用 通常使用v-model指令,在表单控件元素上创建双向数据绑定v-model会根据控件的类型,...

  • vue第二天总结

    一,v-model v-model:双向数据绑定 用于表单元素 {{msg}} new Vue({el:"...

网友评论

      本文标题:第六章 表单与v-model

      本文链接:https://www.haomeiwen.com/subject/yvwltqtx.html