vue 雙向綁定資料限制長度

問題描述

vue中輸入框v-modle 雙向綁定的資料；在需要的業務場景下需要對其進行字數長度限制；

解決方案

可以使用以下方法：

1. 方法一：

//方法一：輸入框添加keypress方法；然後函數為：
maxLength(attr,length){
    let keyCode = event.keyCode;
    console.log("keyCode");
        let len=;
    console.log(this[attr].length);
    for (let codePoint of this[attr]) {
        if (this[attr].charCodeAt(codePoint) > ) {
                len += ;
        } 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);
},
           

方法對比：

方法一優點，循環少，性能高；缺點，中文輸入法空格輸入字元的時候不會觸發；

方法二優點，相容性好，适合各種場景；缺點，循環多，性能比較差；