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 document.execCommand() 常用解析
Dec 14 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
vue实现跨域的方法分析
May 21 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
javascript 简练的几个函数
2009/08/29 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python右对齐的实例方法
2020/07/05 Python
Python基于内置函数type创建新类型
2020/10/22 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
销售简历自我评价
2014/01/24 职场文书
工程款催款函
2015/06/24 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫