效果图
主要思路
- textarea限制最大长度
- 监控输入字数
源代码
html:
<div id="main-container">
<div class="textarea">
<textarea maxlength="200" @input="monitorInput" v-model="textareaContent"></textarea>
<span class="numLimit">{{num}}/200</span>
</div>
</div>
css:
.textarea {
margin: 100px auto;
width: 100%;
text-align: center;
}
.textarea textarea {
width: 400px;
height: 300px;
}
.numLimit {
position: relative;
top: -10px;
left: -90px;
}
js:
var vm = new Vue({
el: '#main-container',
data: {
textareaContent:'',
num: 200,
},
methods: {
monitorInput() {
var txtVal = this.textareaContent.length;
this.num = 200 - txtVal;
}
},
});
希望可以帮到您，感谢！
