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 相关文章推荐
JScript分割字符串示例代码
Sep 04 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
深入理解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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php统计文章排行示例
2014/03/04 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Dom与浏览器兼容性说明
2010/10/25 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python万年历实现代码 含运行结果
2017/05/20 Python
浅析Python面向对象编程
2020/07/10 Python
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
迟到检讨书400字
2014/01/13 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
信息总监管理职责范本
2014/03/08 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
Nebula Graph解决风控业务实践
2022/03/31 MySQL