vue通过watch对input做字数限定的方法


Posted in Javascript onJuly 13, 2017

之前写了关于vue通过watch对input做字数限定的方法,最近需要回顾,就顺便发到随笔上了

<div id="app">
   <input type="text" v-model="items.text" ref="count"/>
   <div v-html="number"></div>
 /div>
new Vue({
  el: '#app',
  data: {
    number: '100',
    items: {
    text:'',
  },
},
watch:{  //watch()监听某个值(双向绑定)的变化,从而达到change事件监听的效果
  items:{
    handler:function(){
      var _this = this;
      var _sum = 100; //字体限制为100个
      _this.$refs.count.setAttribute("maxlength",_sum);
      _this.number= _sum- _this.$refs.count.value.length;
    },
     deep:true
    }
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
vue实现评价星星功能
Jun 30 Javascript
深入理解vue $refs的基本用法
Jul 13 #Javascript
js自定义弹框插件的封装
Aug 24 #Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 #Javascript
jsonp跨域请求详解
Jul 13 #Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 #Javascript
JavaScript反弹动画效果的实现代码
Jul 13 #Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 #Javascript
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
php常用的工具开发整理
2019/09/26 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
模具毕业生推荐信
2014/02/15 职场文书
学校消防安全责任书
2014/07/23 职场文书
个人收入证明范本
2014/09/18 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
Redis+AOP+自定义注解实现限流
2022/06/28 Redis
从原生JavaScript到React深入理解
2022/07/23 Javascript