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 相关文章推荐
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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在字符断点处截断文字的实现代码
2011/04/21 PHP
php对称加密算法示例
2014/05/07 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
详谈js模块化规范
2017/07/07 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python读取stdin方法实例
2019/05/24 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Haggar官网:美国男装品牌
2020/02/16 全球购物
大学生应聘自荐信
2013/10/11 职场文书
综合实践活动报告
2015/02/05 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
2015年党风建设工作总结
2015/04/29 职场文书