资讯专栏INFORMATION COLUMN

Vue.js第八课 表单

weizx / 662人阅读

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

这节我们为大家介绍 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对象的创建 我们第一节课已经就会用了,单体模...

    jzzlee 评论0 收藏0

发表评论

0条评论

weizx

|高级讲师

TA的文章

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