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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
微信小程序 教程之引用
Oct 18 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
Javascript获取某个月的天数
May 30 Javascript
基于JavaScript实现瀑布流布局
Aug 15 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
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
python定时器(Timer)用法简单实例
2015/06/04 Python
python3爬取数据至mysql的方法
2018/06/26 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python实现最速下降法
2020/03/24 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
生产车间实习自我鉴定
2013/09/23 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
青年志愿者活动总结
2014/04/26 职场文书
学习保证书范文
2014/04/30 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang