vue雙向綁定數(shù)據(jù)限制長度的方法
更新時間：2019年11月04日 13:58:15 作者：FE-阿陽
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定數(shù)據(jù)限制長度的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue雙向綁定數(shù)據(jù)如何限制長度？具體方法請閱讀文章
問題描述
vue中輸入框v-modle 雙向綁定的數(shù)據(jù)；在需要的業(yè)務(wù)場景下需要對其進(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);
},
方法對比：
方法一優(yōu)點，循環(huán)少，性能高；缺點，中文輸入法空格輸入字符的時候不會觸發(fā)；
方法二優(yōu)點，兼容性好，適合各種場景；缺點，循環(huán)多，性能比較差；
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue?ElementUI級聯(lián)選擇器回顯問題解決
這篇文章主要介紹了vue?ElementUI級聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
uni-app提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個API獲取系統(tǒng)信息，系統(tǒng)信息返回的內(nèi)容非常多，各操作系統(tǒng)、各家小程序、各瀏覽器對它們的定義也不相同2022-11-11
這篇文章主要為大家介紹了vue插件及修改ip啟動端口的解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
vue router動態(tài)路由設(shè)置參數(shù)可選問題
這篇文章主要介紹了vue-router動態(tài)路由設(shè)置參數(shù)可選，文中給大家提到了vue-router 動態(tài)添加 路由的方法,需要的朋友可以參考下2019-08-08
nuxt 每個頁面head標(biāo)簽內(nèi)容設(shè)置方式
這篇文章主要介紹了nuxt 每個頁面head標(biāo)簽內(nèi)容設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
vue3.0 CLI - 1 - npm 安裝與初始化的入門教程
這篇文章主要介紹了vue3.0 CLI - 1 - npm 安裝與初始化的入門教程,本文通過實例代碼相結(jié)合的形式，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
淺析vue偵測數(shù)據(jù)的變化之基本實現(xiàn)
這里涉及到Vue一個重要特性：響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對象，當(dāng)我們修改時，視圖會被更新，而變化偵測是響應(yīng)式系統(tǒng)的核心2021-06-06
這篇文章主要介紹了vue搜索和vue模糊搜索，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08