今天就跟大家聊聊有關如何在Vue文本框顯示當前可輸字數效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

阿魯科爾沁網站建設公司創新互聯建站,阿魯科爾沁網站設計制作，有大型網站制作公司豐富經驗。已為阿魯科爾沁上千多家提供企業網站建設服務。企業網站搭建\成都外貿網站建設要多少錢，請找那個售后服務好的阿魯科爾沁做網站的公司定做！

直接上代碼。

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

效果：

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

看完上述內容，你們對如何在Vue文本框顯示當前可輸字數效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創新互聯行業資訊頻道，感謝大家的支持。

標題名稱：如何在Vue文本框顯示當前可輸字數效果
鏈接地址：http://vcdvsql.cn/article36/pehppg.html

成都網站建設公司_創新互聯，為您提供網站策劃、網站營銷、網站維護、標簽優化、、做網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯