怎么在vue中實(shí)現(xiàn)雙向綁定數(shù)據(jù)并限制長度

本篇文章給大家分享的是有關(guān)怎么在vue中實(shí)現(xiàn)雙向綁定數(shù)據(jù)并限制長度，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

問題描述

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);
},

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

以上就是怎么在vue中實(shí)現(xiàn)雙向綁定數(shù)據(jù)并限制長度，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。