vue 双向绑定数据限制长度

vue 双向绑定数据限制长度

问题描述

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

解决方案

可以使用以下方法：
1. 方法一：

//方法一：输入框添加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不行；

1. 方法二：

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

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