怎么使用vue匹配两个字符串找出不同的内容高亮

Question

怎么使用vue匹配两个字符串找出不同的内容高亮

如

var a='床前明月光'

var b='床前明月亮光'

找出亮并且变成红色字体

Answer 1

<div>
        <!-- 因为要改变的是单个字符的颜色，需要将字符串转为数组然后通过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>
</div>

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