Vue实现动态显示textarea剩余字数


Posted in Javascript onMay 22, 2017

Vue实现动态显示textarea剩余文字数量,具体内容如下

这里我们假设允许用户输入的最多数量为200个

html代码如下:

<textarea maxlength="200" @input="descInput" v-model="desc" />
<span>{{remnant}}/200</span>

javascript代码如下:

data(){
 return{
 remnant: 200
 }
}

methods:{
 descInput(){
 var txtVal = this.desc.length;
 this.remnant = 200 - txtVal;
 }
}

css代码在这里就不码出来了~

实现效果如下:

Vue实现动态显示textarea剩余字数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 Javascript
token 机制和实现方式
Dec 15 Javascript
JavaScript 原型与原型链详情
Nov 02 Javascript
bootstrap栅格系统示例代码分享
May 22 #Javascript
vue+axios实现登录拦截的实例代码
May 22 #Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 #Javascript
bootstrap模态框远程示例代码分享
May 22 #Javascript
bootstrap手风琴折叠示例代码分享
May 22 #Javascript
移动端手指放大缩小插件与js源码
May 22 #Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
You might like
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
4s客服专员岗位职责
2013/12/01 职场文书
高二历史教学反思
2014/01/25 职场文书
车间机修工岗位职责
2014/02/28 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
《学棋》教后反思
2014/04/14 职场文书
大学生求职信
2014/06/17 职场文书
借名购房协议书范本
2014/10/06 职场文书
人事局接收函
2015/01/30 职场文书
大学生党员个人总结
2015/02/13 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
Java存储没有重复元素的数组
2022/04/29 Java/Android