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%; height: 40px; outline: none; line-height: 40px; font-size: 16px; padding: 0 10px; margin-top: 20px; color: blue; }
.clsmsg { padding: 10px 10px; }
.clsmsg span { color: blue; }
最后一步应该就是引入Vue,然后搭建一些简单的数据内容。
代码如下:
var vm = new Vue({
el: '#app',
data() {
return {
txt: ''
}
},
// 后期代码在下面补充
})
ASCII范围内与范围外
了解ASCII的内容,请移步到http://www.asciima.com/。
ASCII中包含256个字符,因此超过256之外的字符,全部都是非ASCII字符,一般情况下,汉字就是在这个范围中。
因此,编码不在0-255的字符可以使用正则表达式/[^\x00-\xff]/g来进行匹配。这个时候就提供了一个思路,如果不是ASCII码中的字符,那么就默认它占了两个字节。
我们修改一下页面结构,输出一些测试信息:
代码如下:
内容:{{txt}}
输入的字符个数:{{computedCharLen}}
输入的字节个数:{{computedByteLen}}
补充需要的计算属性:
代码如下:
computed: {
// 获取字符的个数
computedCharLen() {
return this.txt.length
},
// 获取字节的个数
computedByteLen() {
return this.txt.replace(/[^\x00-\xff]/g, '01').length
}
}
这个时候,我们输入内容,出现下面的效果:
【图片暂缺】
这个时候会发现,已经实现,ASCII码范围内的占1位,超出范围的占2位。
控制显示的内容
内容显示使用计算属性来实现:
代码如下:
内容:{{computedTxt}}
代码如下:
// 控制显示的内容
computedTxt() {
return this.methodGetByteLen(this.txt, 10)
}
下面补充一下methodGetByteLen方法:
代码如下:
/**
* str 需要控制的字符串
* len 字节的长度,如5个汉字,10个英文,输入参数就是10
*/
methodGetByteLen(str, len) {
// 如果字节的长度小于控制的长度,那么直接返回
if (this.computedByteLen <= len) {
return str
}
for (let i = Math.floor(len / 2); i < str.length; i++) {
if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
// Math.floor(i / 2) * 这里是控制特殊情况的显示
// 如 '一二aaa一二三四',显示的结果就是 '一二aaa一...'
return str.substr(0, Math.floor(i / 2) * 2) + '...'
}
}
}
最终的显示情况没有超过最大指定长度的情况
【图片暂缺】
超过最大指定长度(汉字输入)
【图片暂缺】
超过最大指定长度(数字输入)
【图片暂缺】
超过最大指定长度(汉字和字母的组合)
【图片暂缺】
完整代码
最后,把最终代码粘贴出来:
代码如下:
Document
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #efefef;
}
.clsinp {
width: 100%;
height: 40px;
outline: none;
line-height: 40px;
font-size: 16px;
padding: 0 10px;
margin-top: 20px;
color: blue;
}
.clsmsg {
padding: 10px 10px;
}
.clsmsg span {
color: blue;
}
内容:{{computedTxt}}
输入的字符个数:{{computedCharLen}}
输入的字节个数:{{computedByteLen}}
var vm = new Vue({
el: '#app',
data() {
return {
txt: ''
}
},
// 后期代码在下面补充
methods: {
methodGetByteLen(str, len) {
if (this.computedByteLen <= len) {
return str
}
for (let i = Math.floor(len / 2); i < str.length; i++) {
if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
return str.substr(0, Math.floor(i / 2) * 2) + '...'
}
}
}
},
computed: {
// 获取字符的个数
computedCharLen() {
return this.txt.length
},
// 获取字节的个数
computedByteLen() {
return this.txt.replace(/[^\x00-\xff]/g, '01').length
},
// 控制显示的内容
computedTxt() {
return this.methodGetByteLen(this.txt, 10)
}
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持512笔记。
注:关于结合Vue控制字符和字节的显示个数的示例的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。
关键词:vue.js
vue获取字符串中字符的的数量_结合Vue控制字符和字节的显示个数的示例相关推荐
- 获取字符串中的.前面的长度_算法连载之求解不含有重复字符的最长子串长度...
问题 给定一个字符串,找出其中不含有重复字符的最长子串长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc" ...
- vue 往对象中添加键值对_【Vue】Vue学习之混入
今天学习了Vue中的"混入"知识点,写篇文章用自己的语言来向自己解释它,如有不足还望指点. 混入(mixins): 混入提供了一种非常灵活的方式,来分发Vue组件中的可复用功能 - ...
- JavaScript 获取字符串指定字符的数量 JS 获取字符串指定字符的数量
JavaScript 获取字符串指定字符 //循环对比计数 效率最低 function getCharCount1(str,char){let count= 0;for(let i=0;i<st ...
- C语言 —— 获取字符串中两个字符之间的的数据
问题描述:获取字符串中两个字符之间的数据.最近写SMTP代理,需要获取发送方与接收方的邮件名称. 字符串为 "MAIL FROM:<test1@163.com>\r\n" ...
- python统计字符在文件中出现的次数_python字符串中字符出现次数(python获取字符串个数)...
今天要说的是Python的字符串函数还是很方便的,只需要调用 count() 方法即可. 最近,我在一个网站上看到了一个自然语言处理课程.我详细解释了一些方法的使用,用例很容易理解,所以我想通过我的博 ...
- python 字符串去重且相同字符最多出现2次_【Python】获取字符串中出现次数最多/少的字符...
本节主要实现以下目标: 1.实现Python获取字符串中出现次数最多/少的字符: 2.存在问题分析与处理: 代码说明: 1.max() 方法返回给定参数的最大值,参数可以为序列.详细参考菜鸟教程. 2 ...
- java相同字符截取第n次_Java 获取字符串中第N次出现的字符位置
public static int getCharacterPosition(String string){ //这里是获取"/"符号的位置 Matcher slashMatche ...
- js 获取字符串中第二处出现的某个字符的索引
使用 string.indexOf( searchValue, start ) 函数,两个参数的含义: searchValue 需查询的字符串值 start 可 ...
- 遍历获取字符串中的每一个字符
/*遍历获取字符串中的每一个字符*/ /*public final char charAt(int index) * 读取当前给定索引处的字符 */ ...
最新文章
- Chapter12:动态内存
- 大学计算机基础课程报告python-基于Python的“大学计算机基础”课程教学设计.doc...
- HDU2102 A计划
- codeforces 几道题目
- mybatis模糊查询不同写法
- 前端学习(1927)vue之电商管理系统电商系统之美化一层循环的UI结构for循环渲染第三层结构
- vim剪切指定行_10 分钟上手 Vim,常用命令大盘点
- ASP.NET底层的初步认识与理解
- 一篇文章掌握Egg.js的核心用法
- 研磨设计模式(七)生成器模式
- sql优化常用的几种方法:19种最有效的sql优化技巧
- 自动生成光纤测试资料的软件,光缆测试模板生成工具官方版
- Windows远程桌面连接保姆级教学
- linux dolphin模拟器,dolphin模拟器32位64位
- ElasticSearch 哪里不会点哪里
- PS2021安装方法(附个人详细安装教程)
- html和linux下目录路径中 杠,点杠,点点杠区别
- EDM营销的关键是什么
- mysql五日均线代码_5日均线--攻击线
- k3595参数_1高频三极管的一些型号及参数