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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Vue动态面包屑功能的实现方法
Jul 01 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php四种基础算法代码实例
2013/10/29 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python aiohttp的使用详解
2019/06/20 Python
Django框架models使用group by详解
2020/03/11 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
协议书模板
2014/04/23 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
普通话宣传标语
2014/06/26 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android