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 八进制转义字符(8进制)
Apr 08 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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
phpwind中的数据库操作类
2007/01/02 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
js 小数取整的函数
2010/05/10 Javascript
js获取域名的方法
2015/01/27 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
React实现轮播效果
2020/08/25 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python多进程原理与用法分析
2018/08/21 Python
python实现图片压缩代码实例
2019/08/12 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
如何提高JDBC的性能
2013/04/30 面试题
最新的大学生找工作自我评价
2013/09/29 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
横幅标语大全
2014/06/17 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Python中三种花式打印的示例详解
2022/03/19 Python