Vue字符串查重 ，不重復(fù)的文字高亮顯示

先放效果圖

• 問(wèn)題拆分
  1.要改變顏色為單個(gè)字符顏色，數(shù)據(jù)格式需改變。
  2.對(duì)數(shù)組查重，獲取重復(fù)元素
  3.元素對(duì)比，找出非重復(fù)元素
  4.添加對(duì)應(yīng)樣式

• 改變數(shù)據(jù)格式
  因?yàn)橐淖儐蝹€(gè)字符的顏色，因此每一個(gè)字符必須為一個(gè)獨(dú)立塊，否則無(wú)法單獨(dú)改變某一個(gè)字的樣式，將兩個(gè)字符串相連后使用split()將字符串轉(zhuǎn)為數(shù)組，通過(guò)v-for將每一個(gè)數(shù)組元素渲染出來(lái)

<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('');},

• 查找數(shù)組中重復(fù)的元素
  使用for循環(huán)進(jìn)行textArray數(shù)組的自比，通過(guò)if判定在數(shù)組元素遇到非自己的相同元素時(shí)，將該值用push()方法添加到choose數(shù)組中，最終choose數(shù)組中存放的是所有的重復(fù)元素。

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])} }}},

• 找出非重文字并添加對(duì)應(yīng)的樣式

IndexOf()方法可以檢索數(shù)組中是否存在某元素，當(dāng)存在該元素時(shí)返回該元素在數(shù)組中的位置，不存在返回-1，v-for渲染數(shù)組時(shí)，會(huì)遍歷數(shù)組中的所有元素，在遍歷中添加判定，如果choose數(shù)組中沒(méi)有該元素就改變?cè)撛氐臉邮?#xff0c;判定方法這里使用三元表達(dá)式，如果choose.indexOf(item) >= 0條件成立，那么class為changeBlack，反之為changeRed，這樣就會(huì)使非重復(fù)文字變?yōu)榧t色。

<span v-bind:class="[choose.indexOf(item) >= 0 ?'changeBlack':'changeRed']" v-for="(item,key) in textArray" :key="key">{{item}}<!-- 當(dāng)key+1的值等于第一個(gè)字符串的長(zhǎng)度時(shí)，實(shí)現(xiàn)換行 --><div v-if="key+1 == text1.length "></div> </span>.changeBlack{color: #000;} .changeRed {color: red;}

以下為全部代碼展示

<!-- 因?yàn)橐淖兊氖菃蝹€(gè)字符的顏色，需要將字符串轉(zhuǎn)為數(shù)組然后通過(guò)v-for渲染每一個(gè)文字元素 --><!-- [choose.indexOf(item) >= 0 ?'changeBlack':'changeRde']動(dòng)態(tài)綁定樣式，當(dāng)item的內(nèi)容與choose中的內(nèi)容不匹配時(shí)，也就是choose數(shù)組中沒(méi)有與之相匹配的文字時(shí)，文字為紅色 --><!-- choose.indexOf(item) 當(dāng)匹配成功時(shí)會(huì)返回該元素在數(shù)組中的位置，不匹配時(shí)返回-1--><span v-bind:class="[choose.indexOf(item) >= 0 ?'changeBlack':'changeRed']" v-for="(item,key) in textArray" :key="key">{{item}}<!-- 當(dāng)key+1的值等于第一個(gè)字符串的長(zhǎng)度時(shí)，實(shí)現(xiàn)換行 --><div v-if="key+1 == text1.length "></div></span>data(){return{//text1和text2為字符串text1:'窗前明月光',text2:'窗前明月亮光',//textArray存放的內(nèi)容是將字符串轉(zhuǎn)為數(shù)組后的字符元素textArray:[],//存放的內(nèi)容為查重后的重復(fù)元素choose:[],}},changeArray() {//定義text3，值為text1和text2兩個(gè)相連var text3 = this.text1+this.text2//將text3字符串轉(zhuǎn)為數(shù)組存放到textArray中this.textArray = text3.split('');//for循環(huán)嵌套查找重復(fù)元素for (let i = 0; i < this.textArray.length; i++) {for (let j = 0; j < this.textArray.length; j++) {//textArray數(shù)組中每一個(gè)元素去與其它元素進(jìn)行對(duì)比if (this.textArray[i] == this.textArray[j] && i != j) {//將對(duì)比后重復(fù)的元素插入到choose數(shù)組中this.choose.push(this.textArray[i])} }}},

總結(jié)

以上是生活随笔為你收集整理的Vue字符串查重 、数组查重、不重复的文字高亮显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。