Vue.js自定义事件的表单输入组件方法


Posted in Javascript onMarch 08, 2018

Vue.js使用自定义事件的表单输入组件

自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。要牢记:

<input v-model="something">

这不过是以下示例的语法糖:

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">

所以在组件中使用时,它相当于下面的简写:

<custom-input
 v-bind:value="something"
 v-on:input="something = arguments[0]">
</custom-input>

所以要让组件的 v-model 生效,它应该 (从 2.2.0 起是可配置的):

接受一个 value prop

在有新的值时触发 input 事件并将新值作为参数

我们来看一个非常简单的货币输入的自定义控件:--在父组件中引用子组件模板时用绑定v-model数据:

<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
 template: '\
  <span>\
   $\
   <input\
    ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($event.target.value)"\
   >\
  </span>\
 ',
 props: ['value'],
 methods: {
  // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
  updateValue: function (value) {
   var formattedValue = value
    // 删除两侧的空格符
    .trim()
    // 保留 2 位小数
    .slice(
     0,
     value.indexOf('.') === -1
      ? value.length
      : value.indexOf('.') + 3
    )
   // 如果值尚不合规,则手动覆盖为合规的值
   if (formattedValue !== value) {
    this.$refs.input.value = formattedValue
   }
   // 通过 input 事件带出数值
   this.$emit('input', Number(formattedValue))
  }
 }
})

自定义组件的 v-model

2.2.0 新增

默认情况下,一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突:

Vue.component('my-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: Boolean,
  // 这样就允许拿 `value` 这个 prop 做其它事了
  value: String
 },
 // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码等价于:

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>

注意你仍然需要显式声明 checked 这个 prop。

以上这篇Vue.js自定义事件的表单输入组件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
js Function类型
Dec 04 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
详细讲解vue2+vuex+axios
May 27 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
详解async/await 异步应用的常用场景
May 13 Javascript
js前端图片加载异常兜底方案
Jun 21 Javascript
layui之select的option叠加问题的解决方法
Mar 08 #Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 #Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 #Javascript
Vue.js实现图片的随意拖动方法
Mar 08 #Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 #Javascript
实战node静态文件服务器的示例代码
Mar 08 #Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 #Javascript
You might like
PHP 面向对象详解
2012/09/13 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
语文课外活动总结
2014/08/27 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
python数字图像处理:图像简单滤波
2022/06/28 Python