vue双向绑定数据限制长度的方法


Posted in Javascript onNovember 04, 2019

vue双向绑定数据如何限制长度?具体方法请阅读文章

问题描述

vue中输入框v-modle 双向绑定的数据;在需要的业务场景下需要对其进行字数长度限制;

解决方案

可以使用以下方法:

方法一:

//方法一:输入框添加keypress方法;然后函数为:
maxLength(attr,length){
 let keyCode = event.keyCode;
 console.log("keyCode");
  let len=0;
 console.log(this[attr].length);
 for (let codePoint of this[attr]) {
  if (this[attr].charCodeAt(codePoint) > 128) {
    len += 2;
  } else {
   len++;
  }
  }
 if (len < length) {
  event.returnValue = true;
 } else {
  event.returnValue = false;
 }
},
//注意:事件必须为keypress;
//keydown 可以做限制,但是达到长度不可以删除;keyup不行;

方法二:

//方法二:输入框添加input方法;然后函数为:
inputMaxLength(attr,length){
  this[attr] = api.getStrByteLen(this[attr], length);
},

方法对比:

方法一优点,循环少,性能高;缺点,中文输入法空格输入字符的时候不会触发;
方法二优点,兼容性好,适合各种场景;缺点,循环多,性能比较差;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JavaScript Split()方法
Dec 18 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
JavaScript实现星级评价效果
May 17 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
使用p5.js临摹动态图片
Nov 04 #Javascript
p5.js绘制创意自画像
Nov 04 #Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 #Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 #Javascript
vue中使用GraphQL的实例代码
Nov 04 #Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
You might like
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php常用图片处理类
2016/03/16 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
利用js对象弹出一个层
2008/03/26 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
Angular实现form自动布局
2016/01/28 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
介绍一下gcc特性
2015/10/31 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
打架检讨书2000字
2014/02/22 职场文书
综合实践活动总结
2014/05/05 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
gateway网关接口请求的校验方式
2021/07/15 Java/Android