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

方法对比：

方法一优点，循环少，性能高；缺点，中文输入法空格输入字符的时候不会触发；
方法二优点，兼容性好，适合各种场景；缺点，循环多，性能比较差；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js限制textarea每行输入字符串长度的代码

    但是textarea没有这个属性. asp.net的服务端textbox这个属性也不起效,所以我们只有用js脚本来控制 好,废话不多说,先上代码 javascipt源码: 复制代码 代码如下: function textCounter(field, maxlimit, lines) {//参数说明:field是textarea对象,maxlimit是最大允许长度,lines是行数 var arr = field.value.split("\n");//首先我们要为验证行数,通过分行符&

  • js限制文本框输入长度两种限制方式(长度、字节数)

    功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js 复制代码 代码如下: function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//是否使用字节长度限制(1汉字=2字符) var txtlength;//到达限制时,字符串的长度 var

  • CSS(js)限制页面显示的文本字符长度

    复制代码 代码如下: <nav class="cf_nav clearfix"> <ul> <li> <a href="http://lizhuangs.18021051d350c3871c0a.tpl.diandian.com" title="首页"> <div class="nav_block"> <span>首页</span> <s

  • 限制textbox或textarea输入字符长度的JS代码

    复制代码 代码如下: <script language=javascript> <!-- String.prototype.len=function(){ return this.replace(/[^\x00-\xff]/g,"**").length; } //Set maxlength for multiline TextBox function setMaxLength(object,length) { var result = true; var contro

  • js的参数有长度限制吗？发现不能超过2083个字符

    一个普通的javascrip函数,只有一个入口参数 复制代码 代码如下: function test(info) <img none';="" document.getelementbyid('_20_37_open_text').style.display="none" ;="" document.getelementbyid('_20_37_closed_image').style.display="inline"

  • js 限制表单输入长度 汉字为两个字符

    将该效果整合成了一个函数,此函数接受3个参数: 第一个为textarea或其他text表单的ID: 第二个为显示输入内容的ID,可留空: 第三个为最多输入的字符,一个汉字为2个字符. 这只是一个基础效果,欢迎同学们进行优化和改进. 要获取代码请查看demo的源文件 限制表单输入长度 汉字为两个字符 function lengthLimit(elem, showElem, max){ var elem = document.getElementById(elem); var showElem =

  • JS TextArea字符串长度限制代码集合

    复制代码 代码如下: <html> <body> <textarea id="t"></textarea> <input type="text" id="b2" /> <script type="text/javascript"> textAreaLimit("t",{lastMsgLabel:"b2"}) func

  • js关于字符长度限制的问题示例探讨

    复制代码 代码如下: var fun = function(str){ var preg = new RegExp("[\u4e00-\u9fa5]+","gi"); var preg2 = new RegExp("[^\u4e00-\u9fa5]","gi"); var count = 0; for(var i=0;i<str.length;i++){ if(preg.test(str[i])){ count = co

  • vue双向绑定数据限制长度的方法

    vue双向绑定数据如何限制长度?具体方法请阅读文章 问题描述 vue中输入框v-modle 双向绑定的数据:在需要的业务场景下需要对其进行字数长度限制: 解决方案 可以使用以下方法: 方法一: //方法一:输入框添加keypress方法:然后函数为: maxLength(attr,length){ let keyCode = event.keyCode; console.log("keyCode"); let len=0; console.log(this[attr].length);

  • Vue数据双向绑定原理及简单实现方法

    Vue数据双向绑定原理及简单实现方法

    Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫持.vue是通过Object.defineProperty()来实现数据劫持

  • Vue使用.sync 实现父子组件的双向绑定数据问题

    1.前言 最近在vue 项目中有一个需求, 就是我需要根据不同的类型在页面中放不同的组件, 组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面 代码会显得比较多,毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义成组件 ,封装起来,所以就会遇到 数据的传值绑定问题 2.父组件 首先我们来看看官方文档 [ https://cn.vuejs.org/v2/guide/components.html#sync-修饰符 ] .sync 修饰符所提供的功能.当一个子组件改变了一个 pr

  • Vue双向绑定实现原理与方法详解

    本文实例讲述了Vue双向绑定实现原理与方法.分享给大家供大家参考,具体如下: 昨天接到一个电话面试,上来第一个问题就是Vue双向绑定的原理.当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种. 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入

  • 解决vue项目input输入框双向绑定数据不实时生效问题

    我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解

  • vue自定义组件实现v-model双向绑定数据的实例代码

    项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件. 类似如下: 父组件 <common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange">

  • vue双向绑定的简单实现

    vue双向绑定的简单实现

    研究了一下vue双向绑定的原理,所以简单记录一下,以下例子只是简单实现,还请大家不要吐槽~ 之前也了解过vue是通过数据劫持+订阅发布模式来实现MVVM的双向绑定的,但一直没仔细研究,这次深入学习了一下,借此机会分享给大家. 首先先将流程图给大家看一下 参考文章:Vue.js双向绑定的实现原理 我虽然参考的是这篇文章,下面的代码也是在阅读几遍后仿造的,自己只是简单添加了个递归实现所有dom子节点的双向绑定,以及添加了一些理解,但真正让我了然于心,让我可以独立写出2遍完整逻辑的其实是这张图,所以个

  • vue双向绑定及观察者模式详解

    vue双向绑定及观察者模式详解

    在Vue中,使用了Object.defineProterty()这个函数来实现双向绑定,这也就是为什么Vue不兼容IE8 1 响应式原理 让我们先从相应式原理开始.我们可以通过Object.defineProterty()来自定义Object的getter和setter 从而达到我们的目的. 代码如下 function observe(value, cb) { Object.keys(value).forEach((key) => defineReactive(value, key, value

  • 关于vue双向绑定带来的问题及解决

    关于vue双向绑定带来的问题及解决

    目录 vue双向绑定带来的问题 问题场景 解决方案 vue双向绑定的原理总结 MVVM vue当中的双向绑定 vue双向绑定带来的问题 问题场景 查询完表格数据后 通过作用域插槽,将该行数据传到修改页面(定义了个新对象存储数据),但是由于数据双向绑定,修改这个新对象的值,会影响到最初查询表格获取的值 如下 this.editForm = row 解决方案 方法1:通过json之间的解析,深拷贝创建一个与row无绑定关联的临时对象,再赋值给editForm this.editForm = JSON

  • vue 双向绑定问题$emit无效的解决

    vue 双向绑定问题$emit无效的解决

    目录 vue 双向绑定问题$emit无效 父组件 子组件 vue双向绑定指令 功能 效果展示 vue 双向绑定问题$emit无效 父组件变量传给子组件,子组件$emit 触发父组件的方法修改父组件的变量,但是父组件的值变了,子组件的值没有改变 父组件 <div>     // 子组件     <son :status.sync="status"/> </div> <script> export default {     data(){

随机推荐