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 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
javascript实现支付宝滑块验证码效果
Jul 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
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
python中的sort方法使用详解
2014/07/25 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
前台文员个人求职信范文
2014/01/05 职场文书
农村婚礼主持词
2014/03/13 职场文书
节水口号标语
2014/06/19 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
考试作弊检讨书
2015/01/27 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server