Vue.js 的表单处理

原创2021-10-03 20:03·小沐学学学

本章我们就来说说网页中的交互必备属性， 表单 form， 这个是页面交互用户录入的关键知识点， 在 Vue.js 中使用指令 v-model 进行数据的双向绑定。它会根据控件类型自动的更新数据到页面中。需要注意的是， 在数据初始化的时候， v-model 会忽略页面中自带有的属性值， 只会使用组件中的 data 函数进行数据的初始化。

本章思维导图

Form 表单包含的元素有：

  • <button> 按钮
  • <datalist> 下拉列表，（需较新浏览器支持）
  • <fielddset> 对表单的控制元素进行分组 内置了一个 <legend> 元素作为标题。（需较新浏览器支持）
  • <input> 表单元素， 根据类型又分为： text, checkbox, radio, submit, reset, button， file。
  • <select> 下拉选择 可以使用 <optgroup> 标识一个分组信息
  • <textarea> 文本域， 多行文本框
  • <progress> 任务完成的进度， 新标准（需较新浏览器支持）


我们从最常用且最简单的 文本内容说起。看看 Vue.js 给我们带来了什么便利的改变。

单行文本 （input type='text'）

input 默认类型为： text, 并且使用 v-model 进行数据双向绑定， 直接查看代码：

运行 F5 调试， 浏览器查看效果：

这就是双向绑定的好处， 如果没有这个双向绑定之前， 你需要先绑定 2 个事件， 一个是表单的 change 事件， 一个是元素的更新时间， 在 change 事件触发的时候， 使用 innerText 更新页面元素的内容。

多行文本（Textarea）

查看案例：

调试查看页面， 在第二个文本域中写入文字， 你会发现所有的文本域也会跟着改变， 但是这个不是最好的方式， 如果修改了第一个文本域的值， 你会发现， 后面 v-model 绑定的数据并没有变化 查看效果：

最好的方式就是使用： <textarea v-model="userName"></textarea>

复选框 （input type='checkbox'）

复选框允许你为表单提交时选择一个值或者一组值。单个复选框， 可以绑定到布尔值类型，举例如下：

调试查看未选中：

选中之后的效果：

在多个复选框的情况下， 可以将 input 值绑定到一个数组中， 代码如下：

重新打开该页面， 进行查看效果。 选择之后。 就可以看到效果。这里只是为了演示， 实际中的 value 都是标志字符串。

在复选框中， 可以使用 true-value 和 false-value 进行选中和未选中的值的赋值。

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
// 选中的时候值就为 yes:
vm.toggle === 'yes'
// 未选中的时候值就为 no:
vm.toggle === 'no'


单选框 （input type='radio'）

单选框按钮允许你选择单一的值来提交表单。 默认的情况下为小型圆圈图表。一个单选按钮由具有相同 name 属性的单选按钮组成的。举个例子：

打开浏览器查看效果：

选择框 （ Select ）

HTML <select> 元素是一个提供选项的菜单控件。每个 select 都包含 option 子元素， 并且 option子元素中包含 value 属性， 用于标识当前的会提交的数据值。还可以将 option 放到 optgroup 中， 标识不同的组别。 并且可以在 select 属性上使用 multiple 决定该选择框是否可以多选。查看单选例子：

单选选择框

调试查看效果：

如果选择了 甲 就可以看到下面的效果。

看 乙 的代码重新指定了 value 值。 所以看到效果如下:

多选选择框 multiple

只需要指定 select 的 multiple 属性。

查看效果， 这里需要注意， 使用 ctrl 按下不松进行鼠标单击进行多项选择：

从上面我们可以看到我们的数据基本上就是一个数组项， 这里既然是个数组， 就可以使用 v-for 标签进行渲染， 在实际开发的过程中， 也多数都是使用 v-for 进行渲染。 举个例子：

查看效果：



表单中的修饰符

前面在说事件的时候， 说过事件的修饰符， 在表单中也有修饰符。 分别是： .lazy, .number, .trim

.lazy

在默认渲染的情况下，v-model 在每次 input 事件触发后都将输入的值数据进行双向绑定， 数据更新， 如果不想要这种效果的时候， 可以尝试使用 lazy 修饰符， 这样数据就只会在 change 事件触发之后， 数据才会修改。

这个时候， 不触发 change 事件就不会更新数据到页面上。

.number

将用户输入的数据转换成数值类型。但是需要注意的是， 必须是能够正常转换的字符串才有效， 负责只会返回原始值。

<input v-model.number="age" type="number" />

.trim

这个就是很容易理解了， 就是给字符串去除首尾的空白字符。

<input v-model.trim="msg" />


表单的相关内容这里暂时告一段落。 后续会针对这块进行源码级别分析。 关注我。 看后续的内容。

每天都强制自己做点非舒服区的知识学习， 你会发现你进步神速的。加油！

举报
评论 0
    热门：