vue获取字符串中字符的的数量_结合Vue控制字符和字节的显示个数的示例

这篇文章主要为大家详细介绍了结合Vue控制字符和字节的显示个数的示例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

需求

需求：结合Vue实现下面的效果

输入框中最多输入16个字符

汉字最多显示5个，超出部分以...显示

英文最多显示10个，超出部分以...显示

实现

搭建简单页面，并设置简单样式

在正式开始写核心代码之前，要先把代码结构搭建起来，这样后面写的时候就会看着简洁点了。

首先需要一个输入框用来输入内容，其次需要一个元素，用来显示输入框中的内容，实现数据的双向绑定。

其中，输入内容的最大长度是可以通过input标签的属性来指定的。

代码如下：

内容：{ {txt}}

输入的字符个数：{ {computedCharLen}}

输入的字节个数：{ {computedByteLen}}

页面的结构已经搭建完成了，那下面就是做一些简单的样式优化了。

代码如下：

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { background: #efefef; }

.clsinp { width: 100%; heigh