<div class="input">
  <textarea @input="descArea" name="" id="" cols="30" rows="10" v-model="textareaDesc" placeholder="請填寫備註資訊,如:需帶個人簡歷、身份說明"></textarea>
   <p>{{zero}}/{{max}}</p>
</div>

<script>
export default {
  name: 'invitation',
  data() {
    return {
      list: ['待查閱', '已查閱', '已購買', '已邀約', '不合適'],
      textareaDesc: '',
      zero: '0',
      max: '400'
    };
  },
  methods: {
    descArea: function () {
      console.log(this.textareaDesc.length);
      console.log(this.textareaDesc);
      this.zero = this.textareaDesc.length;
      if (this.textareaDesc.length > 400) {
        this.zero = 400;
        this.textareaDesc = this.textareaDesc.slice(0, 401);
      }
    }
  }
};
</script>
 

話不多說直接上圖，首先，監聽 textarea 的內容變化，我們可以用input方法，因為我們是vue專案，所以 textarea 的vule 我們換成 v-model ，這樣方便資料互動。

然後我們限制長度（限制字數，我這裡是400），思路就是，獲得輸入的內容的長度，即 this.textareaDesc.length ，判斷該長度是否超過400 ，如果超過400，我們就擷取0-400之間的，超過400的不予顯示，要顯示選定的元素 ，就用slice（start,end），這裡要注意，start是包含的，end則是不包含的，就相當於，你要是要擷取3個字元，那就得 slice（0,4）。

以上就是限制長度啦，本文方法對 input 和 textarea 都適用