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对象属性方法汇总
Nov 21 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JS制作简单的三级联动
Mar 18 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php排序算法实例分析
2016/10/17 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python3基础之函数用法
2014/08/13 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python格式化输出%s和%d
2018/05/07 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
在python shell中运行python文件的实现
2019/12/21 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python如何读取、写入CSV数据
2020/07/28 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
介绍Java的内部类
2012/10/27 面试题
秋季校运动会广播稿
2014/02/23 职场文书
求职信怎么写
2014/05/23 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Python进度条的使用
2021/05/17 Python
Python利用capstone实现反汇编
2022/04/06 Python