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 DOM 元素ID就是全局变量
Sep 20 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
AngularJS执行流程详解
Feb 17 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 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
浅析51个PHP处理字符串的函数
2013/08/02 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
javascript学习网址备忘
2007/05/29 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
js实现div色块碰撞
2020/01/16 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Python random模块常用方法
2014/11/03 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
基于pip install django失败时的解决方法
2018/06/12 Python
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
美容师的职业规划书
2013/12/27 职场文书
优秀求职信范文分享
2014/01/26 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
语文教师求职信范文
2015/03/20 职场文书
大学生求职意向书
2015/05/11 职场文书
西柏坡观后感
2015/06/08 职场文书
童年读书笔记
2015/06/26 职场文书
2019个人工作总结
2019/06/21 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP