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 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
js数组去重的hash方法
Dec 22 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
发布你的Python模块详解
2016/09/15 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
pycharm的python_stubs问题
2020/04/08 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
What is view? why do we have view?
2012/06/22 面试题
幼儿教师考核制度
2014/01/25 职场文书
项目负责人任命书
2014/06/04 职场文书
环境卫生倡议书
2014/08/29 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
常用的Python代码调试工具总结
2021/06/23 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫