Vue文本框显示当前可输字数效果

前端  /  管理员 发布于 6年前   383

直接上代码。

<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文本框显示当前可输字数效果的详细内容，更多请关注其它相关文章！