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 相关文章推荐
jquery模拟进度条实现方法
Aug 03 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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面试题附答案
2009/01/07 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
vue项目实战总结篇
2018/02/11 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Python实现处理管道的方法
2015/06/04 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python实现飞机大战小游戏
2019/11/08 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Python识别html主要文本框过程解析
2020/02/18 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
华为python面试题
2016/05/03 面试题
职工代表大会主持词
2014/04/01 职场文书
倡导文明标语
2014/06/16 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis