vue实时显示textarea字数_Vue如何实现文本框显示剩余可输字数效果？（代码示例）...

本篇文章给大家通过代码示例介绍一下Vue textarea超级简单实现文本框显示剩余可输字数。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

直接上代码。

可输入

{{remnant}}个字。

export default {

data() {

return {

val: "",

maxLength: 30

};

},

computed: {

remnant() {

return this.maxLength - this.val.length;

}

}

};

.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;

}

效果：

一个双向绑定和一个计算属性 轻松搞定。本文转载自：https://blog.csdn.net/someWhere_weMeet/article/details/98473432

更多web开发知识，请查阅 HTML中文网 ！！