vue雙向綁定數據限制長度的方法
更新時間：2019年11月04日 13:58:15 作者：FE-阿陽
這篇文章主要為大家詳細介紹了vue雙向綁定數據限制長度的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue雙向綁定數據如何限制長度？具體方法請閱讀文章
問題描述
vue中輸入框v-modle 雙向綁定的數據；在需要的業(yè)務場景下需要對其進行字數長度限制；
解決方案
可以使用以下方法：
方法一：
//方法一：輸入框添加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);
},
方法對比：
方法一優(yōu)點，循環(huán)少，性能高；缺點，中文輸入法空格輸入字符的時候不會觸發(fā)；
方法二優(yōu)點，兼容性好，適合各種場景；缺點，循環(huán)多，性能比較差；
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解Vue的ref特性的使用,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
本文主要介紹了element多個table實現同步滾動，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
如何解決Element-ui的el-table固定列后出現的表格錯位問題
這篇文章主要介紹了如何解決Element-ui的el-table固定列后出現的表格錯位問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
今天小編就為大家分享一篇解決vue-cli 打包后自定義動畫未執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了基于vue2實現左滑刪除功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了詳解關于element級聯(lián)選擇器數據回顯問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue + Electron 制作桌面應用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
這篇文章主要介紹了Vue自定義屬性,結合實例形式分析了vue.js自定義屬性相關原理、實現方法及操作注意事項,需要的朋友可以參考下2019-02-02
Vue中消息橫向滾動時setInterval清不掉的問題及解決方法
最近在做項目時,需要進行兩個組件聯(lián)動,一個輪詢獲取到消息,然后將其傳遞給另外一個組件進行橫向滾動展示,結果滾動的速度越來越快。接下來通過本文給大家分享Vue中消息橫向滾動時setInterval清不掉的問題及解決方法，感興趣的朋友一起看看吧2019-08-08
vue利用vue meta info設置每個頁面的title與meta信息
這篇文章主要給大家介紹了關于vue如何利用vue meta info設置每個頁面的title與meta信息的相關資料,文中將實現的方法介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-10-10