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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
Element Rate 评分的使用方法
Jul 27 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创建多级目录代码
2008/06/05 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
js实现微信聊天界面
2020/08/09 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
报关专员求职信范文
2014/02/22 职场文书
高级工程师英文求职信
2014/03/19 职场文书
春季防火方案
2014/05/10 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Golang连接并操作MySQL
2022/04/14 MySQL
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers