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字符串查重 、数组查重、不重复的文字高亮显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。