资讯专栏INFORMATION COLUMN

Vue.js第八课 表单

weizx / 595人阅读

摘要:你可以用指令在表单控件元素上创建双向数据绑定。会根据控件类型自动选取正确的方法来更新元素。如果要自动过滤用户输入的首尾空格,可以添加修饰符到上过滤输入

这节我们为大家介绍 Vue.js 表单上的应用。

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。
输入框

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定:


input 元素:



消息是: {{ message }}

textarea 元素:


{{ message2 }}



复选框

复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
复选框

以下实例中演示了复选框的双向数据绑定:


单个复选框:



多个复选框:










选择的值为: {{ checkedNames }}

实例中勾选复选框效果如下所示:

单选按钮

以下实例中演示了单选按钮的双向数据绑定:
单选按钮










选中值为: {{ picked }}

选中后,效果如下图所示:

select 列表

以下实例中演示了下拉列表的双向数据绑定:
select


  选择的网站是: {{selected}}


选取 Runoob,输出效果如下所示:

修饰符
.lazy

在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:


.number

如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:

这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/23024.html

相关文章

  • 八课 表格 html5学习3

    表格用来处理表格式数据的,不是用来布局的。 一、基本语法格式    行标签       单元格标签    二、表格注意事项 里只放标签 里可以放所有元素  三、表格属性 在table中设置 boder: 默认border=0; cellspacing: 单元格之间的空白距离 默认值为2; cellpadding: 文字与单元格之间的距离 默认值为1; width:宽度 height:高度 al...

    v1 评论0 收藏0
  • 体验js之美八课-面向对象创建和继承终结篇

    摘要:概述到这里我们讲说面向对象的系列部分的最后一个课程,面向对象必须掌握两个东西一个是对象的创建一个是继承。只需要记住一句话,属性放在构造函数里面,方法放在原型上。 概述 到这里我们讲说js面向对象的系列部分的最后一个课程,面向对象必须掌握两个东西一个是对象的创建一个是继承。这节课我们重点说说这两个问题最后我们说下在ES6里面面向对象怎么玩。 1对象的创建 我们第一节课已经就会用了,单体模...

    Keven 评论0 收藏0
  • 体验js之美八课-面向对象创建和继承终结篇

    摘要:概述到这里我们讲说面向对象的系列部分的最后一个课程,面向对象必须掌握两个东西一个是对象的创建一个是继承。只需要记住一句话,属性放在构造函数里面,方法放在原型上。 概述 到这里我们讲说js面向对象的系列部分的最后一个课程,面向对象必须掌握两个东西一个是对象的创建一个是继承。这节课我们重点说说这两个问题最后我们说下在ES6里面面向对象怎么玩。 1对象的创建 我们第一节课已经就会用了,单体模...

    jzzlee 评论0 收藏0
  • Linux - 收藏集 - 掘金

    摘要:探索之旅第三部分第五课延时执行,唯慢不破掘金作者谢恩铭转载请注明出处内容简介第三部分第五课延时执行,唯慢不破第三部分第六课预告第三部分测验题延时执行,唯慢不破上一课探索之旅第三部分第四课后台运行及合并多个终端中,我们学习了后台进程以及 Linux 探索之旅 | 第三部分第五课:延时执行,唯慢不破 - 掘金-- 作者 谢恩铭 转载请注明出处 内容简介 第三部分第五课:延时执行,唯慢不破 ...

    wenzi 评论0 收藏0
  • Linux - 收藏集 - 掘金

    摘要:这一课我们来学探索之旅第三部分第一课数据处理,慢条斯理掘金作者谢恩铭转载请注明出处内容简介第三部分第一课数据处理,慢条斯理第三部分第二课预告流管道重定向,三管齐下数据处理,慢条斯理哈哈,终于到了第三部分了。 Linux 基础之常用命令篇 - 后端 - 掘金最近一段时间工作实在是太忙了,所以好久没有写文章了,趁着周末把linux 的相关知识,整理了下。这一篇文件主要记录了一些linux的...

    lolomaco 评论0 收藏0

发表评论

0条评论

weizx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<