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.text2
         this.textArray = text3.split('');
     },

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

changeArray() {
         var text3 = this.text1+this.text2
         this.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])
                    } 
                }
            }
        },

本文地址：https://blog.csdn.net/Menkongkong/article/details/112557400