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事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
js中常用的Math方法总结
Jan 12 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
JS实现的RC4加密算法示例
Aug 16 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框架系列文章(6)mysql数据库方法
2016/03/04 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
php通过各种函数判断0和空
2020/07/04 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python 登录网站详解及实例
2017/04/11 Python
Python实现的密码强度检测器示例
2017/08/23 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
教师自我鉴定范文
2013/11/10 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
平安家庭事迹材料
2014/12/20 职场文书
医院感染管理制度
2015/08/05 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang