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

vue双向绑定数据如何限制长度？具体方法请阅读文章问题描述vue中输入框v-modle双向绑定的

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);
},

方法对比：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue双向绑定数据限制长度 vue双向绑定 vue双向绑定数据