欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

Vue实现动态显示textarea剩余字数

时间:2021-02-24 09:35:22|栏目:vue|点击:

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代码在这里就不码出来了~

实现效果如下:

上一篇:在vue2.0中引用element-ui组件库的方法

栏    目:vue

下一篇:Vue.js实现一个todo-list的上移下移删除功能

本文标题:Vue实现动态显示textarea剩余字数

本文地址:http://www.codeinn.net/misctech/68738.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有