Maison  >  Article  >  interface Web  >  La zone de texte Vue affiche le nombre actuel de mots pouvant être saisis

La zone de texte Vue affiche le nombre actuel de mots pouvant être saisis

青灯夜游
青灯夜游avant
2020-07-28 17:27:082264parcourir

La zone de texte Vue affiche le nombre actuel de mots pouvant être saisis

Téléchargez le code directement.

<template>
  <p class="wrapper">
    <p class="parents">
      <textarea placeholder="请输入您要填写的个性签名" maxlength="30" autofocus="true" v-model="val"></textarea>
      <span class="tips">
        可输入
        <b :class="{&#39;remnant&#39;:remnant.length!=0,&#39;zero&#39;: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>

Effet :

La zone de texte Vue affiche le nombre actuel de mots pouvant être saisis

La zone de texte Vue affiche le nombre actuel de mots pouvant être saisis

La zone de texte Vue affiche le nombre actuel de mots pouvant être saisis

Une liaison bidirectionnelle et un calcul propriété Facile à faire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer