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 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
jQuery示例收集
Nov 05 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
canvas时钟效果
Feb 16 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
Smarty模板快速入门
2007/01/04 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
原生JS实现小小的音乐播放器
2017/10/16 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
物流管理专业应届生求职信
2013/11/21 职场文书
区级文明单位申报材料
2014/05/15 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书