今天就跟大家聊聊有关如何在Vue文本框显示当前可输字数效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

直接上代码。

<template> <p class="wrapper"> <p class="parents"> <textarea placeholder="请输入您要填写的个性签名" maxlength="30" autofocus="true" v-model="val"></textarea> <span class="tips"> 可输入 <b :class="{'remnant':remnant.length!=0,'zero':remnant.length==0}">{{remnant}}</b>个字。 </span> </p> </p></template><script>export default { data() { return { val: "", maxLength: 30 }; }, computed: { remnant() { return this.maxLength - this.val.length; } }};</script><style scoped>.wrapper { border-top: 1px solid #999; padding: 30px;}.parents { width: 100%; height: 80px; position: relative;}textarea { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}.tips { position: absolute; bottom: 0; right: 0;}.remnant { color: aqua;}.zero{ color: #e81844;}</style>

效果：

一个双向绑定和一个计算属性 轻松搞定。

看完上述内容，你们对如何在Vue文本框显示当前可输字数效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。