怎么在Vue中控制字符和字节的显示个数

　　介绍

本篇文章为大家展示了怎么在Vue中控制字符和字节的显示个数,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

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

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

& lt; div  id=癮pp"比; 　　,& lt; input  v模型=皌xt",类=癱lsinp",最大长度=?6“,占位符=扒胧淙肽谌荨?类型=皌ext"比; 　　,& lt; div 类=癱lsmsg"比; 　　& lt;才能p>内容:& lt; span>{{三}}& lt;/span> & lt;/p> 　　& lt;才能p>输入的字符个数:& lt; span> {{computedCharLen}} & lt;/span> & lt;/p> 　　& lt;才能p>输入的字节个数:& lt; span> {{computedByteLen}} & lt;/span> & lt;/p> 　　,& lt;/div> 　　& lt;/div>

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

*,{,保证金:0;,填充:,0;,-webkit-box-sizing:, border-box;, box-sizing:, border-box;,} 　　body {,背景:# efefef;,} 　　.clsinp {,宽度:100%;,高度:,40 px;,大纲:,没有,,行高:,40 px;,字体大小:,16 px;,填充:,0,10 px;, margin-top:, 20 px;,颜色:,蓝色,,} 　　.clsmsg {,填充:10 px  10 px;,} 　　.clsmsg  span {,颜色:蓝色,,}

最后一步应该就是引入Vue,然后搭建一些简单的数据内容。

var  vm =, Vue ({new  　　,el: & # 39; #应用# 39; 　　,数据(){ 　　return {才能 　　,,,txt: & # 39; & # 39; 　　,,} 　　}, 　　,//后期代码在下面补充 　　})

<>强ASCII范围内与范围外

了解ASCII的内容,请移步到http://www.asciima.com/<代码> 。

ASCII中包含256个字符,因此超过256年之外的字符,全部都是非ASCII字符,一般情况下,汉字就是在这个范围中。

因此,编码不在0 - 255的字符可以使用正则表达式<代码>/[^ \ x00 - \ xff]/g>

我们修改一下页面结构,输出一些测试信息:

& lt; div  id=癮pp"比; 　　,& lt; input  v模型=皌xt",类=癱lsinp",最大长度=?6“,占位符=扒胧淙肽谌荨?类型=皌ext"比; 　　,& lt; div 类=癱lsmsg"比; 　　& lt;才能p>内容:& lt; span>{{三}}& lt;/span> & lt;/p> 　　& lt;才能p>输入的字符个数:& lt; span> {{computedCharLen}} & lt;/span> & lt;/p> 　　& lt;才能p>输入的字节个数:& lt; span> {{computedByteLen}} & lt;/span> & lt;/p> 　　,& lt;/div> 　　& lt;/div>

补充需要的计算属性:

计算:,{ 　　,//获取字符的个数 　　,computedCharLen (), { 　　return  this.txt.length才能 　　}, 　　,//获取字节的个数 　　,computedByteLen (), { 　　return 才能;this.txt.replace (/[^ \ x00 - \ xff]/g, & # 39; 01 & # 39;) . length 　　,} 　　}

这个时候,我们输入内容,出现下面的效果:

怎么在Vue中控制字符和字节的显示个数

这个时候会发现,已经实现,ASCII码范围内的占1位,超出范围的占2位。

<>强控制显示的内容

内容显示使用计算属性来实现:

& lt; p>内容:& lt; span> {{computedTxt}} & lt;/span> & lt;/p> //,控制显示的内容 　　computedTxt (), { 　　,return  this.methodGetByteLen (this.txt, 10) 　　}

下面补充一下<代码> methodGetByteLen 方法:

/* * 　　,* str 需要控制的字符串 　　,* len 字节的长度,如5个汉字,10个英文,输入参数就是10 　　,*/methodGetByteLen (str, len), { 　　,//如果字节的长度小于控制的长度,那么直接返回 　　,if  (this.computedByteLen  & lt;=, len), { 　　return 才能,str 　　,} 　　,for  (let 小姐:=,Math.floor(时间/len  2);,小姐:& lt;, str.length;,我+ +),{ 　　if 才能;(str.substr (0, 1) .replace (/[^ \ x00 - \ xff]/g, & # 39; 01 & # 39;) .length 祝辞=,len), { 　　,,//,Math.floor(时间/小姐;2),*,这里是控制特殊情况的显示//,,,如,& # 39;一二aaa一二三四& # 39;,显示的结果就是,& # 39;一二aaa一……& # 39; 　　,,return  str.substr (0,, Math.floor(时间/小姐;2),*,2),+,& # 39;……& # 39; 　　,,} 　　,} 　　}

最终的显示情况没有超过最大指定长度的情况

怎么在Vue中控制字符和字节的显示个数

怎么在Vue中控制字符和字节的显示个数