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 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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
SONY SRF-M100的电路分析
2021/03/02 无线电
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP经典面试题集锦
2015/03/19 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
python批量提取word内信息
2015/08/09 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python实现两个文件夹的同步
2019/08/29 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
中层干部岗位职责
2013/12/18 职场文书
无私奉献演讲稿
2014/09/04 职场文书
休学证明范本
2015/06/19 职场文书
初中军训感言
2015/08/01 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL