怎么在vue中实现双向绑定数据并限制长度

本篇文章给大家分享的是有关怎么在vue中实现双向绑定数据并限制长度，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

问题描述

vue中输入框v-modle 双向绑定的数据；在需要的业务场景下需要对其进行字数长度限制；

解决方案

可以使用以下方法：

方法一：

//方法一：输入框添加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); },

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

以上就是怎么在vue中实现双向绑定数据并限制长度，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。