Vue字符串查重、数组查重、不重复的文字高亮显示

Vue字符串查重，不重复的文字高亮显示

先放效果图

问题拆分
1.要改变颜色为单个字符颜色，数据格式需改变。
2.对数组查重，获取重复元素
3.元素对比，找出非重复元素
4.添加对应样式
改变数据格式
因为要改变单个字符的颜色，因此每一个字符必须为一个独立块，否则无法单独改变某一个字的样式，将两个字符串相连后使用split()将字符串转为数组，通过v-for将每一个数组元素渲染出来

<span  v-for="(item,key) in textArray" :key="key">{{item}}
</span>data(){return{text1:'窗前明月光',text2:'窗前明月亮光',textArray:[],choose:[],}},changeArray() {var text3 = this.text1+this.text2this.textArray = text3.split('');},

查找数组中重复的元素
使用for循环进行textArray数组的自比，通过if判定在数组元素遇到非自己的相同元素时，将该值用push()方法添加到choose数组中，最终choose数组中存放的是所有的重复元素。

changeArray() {var text3 = this.text1+this.text2this.textArray = text3.split('');for (let i = 0; i < this.textArray.length; i++) {for (let j = 0; j < this.textArray.length; j++) {if (this.textArray[i] == this.textArray[j] && i != j) {this.choose.push(this.textArray[i])} }}},

找出非重文字并添加对应的样式

IndexOf()方法可以检索数组中是否存在某元素，当存在该元素时返回该元素在数组中的位置，不存在返回-1，v-for渲染数组时，会遍历数组中的所有元素，在遍历中添加判定，如果choose数组中没有该元素就改变该元素的样式，判定方法这里使用三元表达式，如果choose.indexOf(item) >= 0条件成立，那么class为changeBlack，反之为changeRed，这样就会使非重复文字变为红色。

<span v-bind:class="[choose.indexOf(item) >= 0 ?'changeBlack':'changeRed']" v-for="(item,key) in textArray" :key="key">{{item}}<!-- 当key+1的值等于第一个字符串的长度时，实现换行 --><div v-if="key+1 == text1.length "></div>
</span>.changeBlack{color: #000;}
.changeRed {color: red;}

以下为全部代码展示

     <!-- 因为要改变的是单个字符的颜色，需要将字符串转为数组然后通过v-for渲染每一个文字元素 --><!-- [choose.indexOf(item) >= 0 ?'changeBlack':'changeRde']动态绑定样式，当item的内容与choose中的内容不匹配时，也就是choose数组中没有与之相匹配的文字时，文字为红色 --><!-- choose.indexOf(item) 当匹配成功时会返回该元素在数组中的位置，不匹配时返回-1--><span v-bind:class="[choose.indexOf(item) >= 0 ?'changeBlack':'changeRed']" v-for="(item,key) in textArray" :key="key">{{item}}<!-- 当key+1的值等于第一个字符串的长度时，实现换行 --><div v-if="key+1 == text1.length "></div></span>data(){return{//text1和text2为字符串text1:'窗前明月光',text2:'窗前明月亮光',//textArray存放的内容是将字符串转为数组后的字符元素textArray:[],//存放的内容为查重后的重复元素choose:[],}},changeArray() {//定义text3，值为text1和text2两个相连var text3 = this.text1+this.text2//将text3字符串转为数组存放到textArray中this.textArray = text3.split('');//for循环嵌套查找重复元素for (let i = 0; i < this.textArray.length; i++) {for (let j = 0; j < this.textArray.length; j++) {//textArray数组中每一个元素去与其它元素进行对比if (this.textArray[i] == this.textArray[j] && i != j) {//将对比后重复的元素插入到choose数组中this.choose.push(this.textArray[i])} }}},

Vue字符串查重、数组查重、不重复的文字高亮显示相关推荐

vue字符串列表转换数组_vue 数组对接字符串传值时候，join(',') 一下 watch
linux TCP: time wait bucket table overflow 早上一台rabbitmq和Java所在的服务器,客户端反馈超级卡,看io和cpu都不高.发现六七万消息挤压,临时性 ...
字符串分割成数组元素和去掉重复元素
处理买家姓名,需要对姓名去前后空格,需要去掉重复姓名,还要计算重复姓名的次数,把买家姓名保存为数组元素,以下是参考代码: /** 功能:把字符串转换为数组,字符串用换行隔开,数组元素去掉空的.前后空格 ...
guid会重复吗_知网查重会查重表格吗
知网查重会查重表格吗?答案是肯定的.如果出现知网查重表格重复很高,那么我们一样是会进行避免查重的,通常表格在查重后会在报告中展示,如果出现重复会提示大家,我们只需要根据这个提示进行修改降低表格查重率即 ...
论文查重免费查重系统需要了解的常识
现在很多人都有过写论文的经历. 大家毕业时必须交毕业论文.工作之余, 大家还要写一些学术论文.无论写哪种类型的论文,一般都需要对论文进行查重,因为只有符合查重标准的论文才是合格的论文.现在,网络上 ...
毕业论文查重的降重心得
一.唠嗑不知不觉已经要毕业了,总结分享一下最近几天的论文查重的降重过程~先上成果图(#^.^#) 第一次查重:o(╥﹏╥)o 目前结果:(*￣︶￣) 二.技巧总结经过了我抓耳挠腮的努力,终于把查 ...
【学习经验分享NO.15】本科硕士学位论文和学术论文查重及降重方法
文章目录前言一.查重方法 1.查重指标的含义 2.查重方法二.如何修改论文重复三.常见问题答疑总结前言学术小论文以及本科和硕士大论文在发表前需要进行降重处理,不然重复率过高会影响论文的发 ...
论文查重会查哪些内容?
网络科技的飞速发展给我们的生活带来了不小的便利,也带来了一些麻烦,现在不管是网站还是自己写文章,愿意原创的人越来越少,基本上都是抄袭或者直接采集,论文就是抄袭的重灾区.针对这一情况,各高校也出台了一系 ...
论文查重会查图表吗？
大学里有很多专业,不同的专业他写论文所涉及的一些方面也不一样.许多人在写论文时,由于要深入研究,有些还需要进行相关的实验.因此说在毕业论文中会插入一些图片和表格.尤其对理科专业的人来说,图表在他们的论 ...
论文查重是查哪些部分？
论文查重是查哪些部分?论文有相同的情况经常有,如果重复了就要重新阅读资料在修改,修改之后还有查重,这个就比较麻烦了,可以用手机迅捷论文查重来查重的,这样效果也比较好. 查重方法: 1.在手机市场里面找 ...

Vue字符串查重、数组查重、不重复的文字高亮显示

Vue字符串查重，不重复的文字高亮显示

Vue字符串查重、数组查重、不重复的文字高亮显示相关推荐

最新文章

热门文章

Vue字符串查重 、数组查重、不重复的文字高亮显示

Vue字符串查重 ，不重复的文字高亮显示

Vue字符串查重 、数组查重、不重复的文字高亮显示相关推荐

最新文章

热门文章

Vue字符串查重、数组查重、不重复的文字高亮显示

Vue字符串查重，不重复的文字高亮显示

Vue字符串查重、数组查重、不重复的文字高亮显示相关推荐