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 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
Vue中封装input组件的实例详解
Oct 17 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
详解Python3的TFTP文件传输
2018/06/26 Python
python操作excel的方法
2018/08/16 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
收银员岗位职责
2014/02/07 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
爱护公共设施标语
2014/06/24 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
寒假安全保证书
2015/02/28 职场文书
2015年教研组工作总结
2015/05/04 职场文书
旗帜观后感
2015/06/08 职场文书
丧事主持词
2015/07/02 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL