专栏首页前端开发随笔Vue监听文本框实时输入限制输入长度

Vue监听文本框实时输入限制输入长度

  <textarea v-model="value" placeholder="输入内容" @input="inputArea()"></textarea>
 new Vue({
        el: ".box",
        data: {
            value: "",
            maxLength: 100,
            currentLength: 0
        },
         methods: {
	        inputArea() {
              this.currentLength = this.value.length
              if (this.currentLength > this.maxLength) {
                  this.currentLength = 100
                  this.value = this.value.slice(0, 100)
              }
          },
      }
  })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue Router 实现多种页面跳转

    用法跟this.$router.push一样,但是跳转有区别。 前者跳转之后会向history栈添加一个记录,点击后退会返回到上一个页面。 后者跳转不会向h...

    任我行RQ
  • Vue实现pc/H5弹窗拖拽

    任我行RQ
  • jQuery点击切换增加和删除class类

    任我行RQ
  • 实现盒子动画和键盘特效

    望月从良
  • Node.js 里,如何凭空创建一个以假乱真的 FileStream?

    感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学...

    ayqy贾杰
  • html canvas绘制视频

    sofu456
  • element-vue使用富文本编辑器【前端】

    官方地址:https://quilljs.com/docs/quickstart/

    sinnoo
  • Javascript中关键参数this浅析

    Sb_Coco
  • 使用Express+TypeScript编写后台服务

    最近接到一个比较简单的任务,需求如下: 1、从MQTT服务器订阅断电报警信息然后入库到SQLServer或者MySQL数据库中 2、从MQTT服务器订阅到站...

    ccf19881030
  • Mybatis深入源码分析之Mapper与接口绑定原理源码分析

    紧接上篇文章:Mybatis深入源码分析之SqlSessionFactoryBuilder源码分析,这里再来分析下,Mapper与接口绑定原理。

    须臾之余

扫码关注云+社区

领取腾讯云代金券