Vue实现动态显示textarea输入文字数量

最新推荐文章于 2025-06-12 11:35:53 发布

置顶郅菇凉

最新推荐文章于 2025-06-12 11:35:53 发布

阅读量1.6w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端vue vue 文章标签： vue textarea 输入文字数量 vue textare

本文链接：https://blog.csdn.net/qq_24612793/article/details/81283500

前端vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

本文介绍了一个使用 Vue.js 实现的文本输入框组件，该组件具备字符计数功能，能够实时显示用户输入的字符数量。通过 `v-model` 绑定数据并监听输入事件，实现对输入内容长度的跟踪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

 <div class="applyInput cb mt3">
    <textarea placeholder="请输入" maxlength="500" @input="descInput" v-model="desc" />
    <span class="numberV">{{txtVal}}/500</span>
 </div>

<script>
export default {
  name: 'applyAgent',
  data () {
    return {
      txtVal: 0,
      desc:""
    }
  },
  methods: {
    descInput(){
        this.txtVal = this.desc.length;
        }
    }
}
</script>