vue双向绑定数据限制长度的方法
更新时间：2019年11月04日 13:58:15 作者：FE-阿阳
这篇文章主要为大家详细介绍了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的ref特性的使用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
本文主要介绍了element多个table实现同步滚动，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
如何解决Element-ui的el-table固定列后出现的表格错位问题
这篇文章主要介绍了如何解决Element-ui的el-table固定列后出现的表格错位问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
今天小编就为大家分享一篇解决vue-cli 打包后自定义动画未执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了基于vue2实现左滑删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了详解关于element级联选择器数据回显问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue + Electron 制作桌面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-11-11
这篇文章主要介绍了Vue自定义属性,结合实例形式分析了vue.js自定义属性相关原理、实现方法及操作注意事项,需要的朋友可以参考下2019-02-02
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快。接下来通过本文给大家分享Vue中消息横向滚动时setInterval清不掉的问题及解决方法，感兴趣的朋友一起看看吧2019-08-08
vue利用vue meta info设置每个页面的title与meta信息
这篇文章主要给大家介绍了关于vue如何利用vue meta info设置每个页面的title与meta信息的相关资料,文中将实现的方法介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
最新评论