直接上代碼。

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

效果：

一個雙向綁定和一個計算屬性 輕松搞定。