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各种复制代码收集
Sep 20 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
原生js实现日期联动
Jan 12 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
解决vue scoped html样式无效的问题
Oct 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
Python中类型检查的详细介绍
2017/02/13 Python
Python 多线程Threading初学教程
2017/08/22 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
三好学生自我鉴定
2013/12/17 职场文书
青年文明号事迹材料
2014/01/18 职场文书
低碳环保倡议书
2014/04/14 职场文书
计生个人工作总结
2015/02/28 职场文书
付款证明格式范文
2015/06/19 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS