Vue实现动态显示textarea剩余字数
更新时间:2017年05月22日 15:24:15 作者:HaiJing1995
这篇文章主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
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计算属性computed--getter和setter用法
这篇文章主要介绍了vue计算属性computed--getter和setter用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
这篇文章主要介绍了详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-04-04vue数据监听解析Object.defineProperty与Proxy区别
这篇文章主要为大家介绍了vue数据监听解析Object.defineProperty Proxy源码示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03
最新评论