textarea统计剩余字数(动态提示)

效果图

主要思路

• 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;
        }
      },
    });