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