veu小小算法|（帮解决问题）

某天一个朋友问我两段话怎么找出不同的字然后给颜色呢。 于是我就尝试了下

<template>
    <div>
        <p>
            <span v-for="(item,index) of list1" :key="index" :class="{Cred:item.flag===false}">{{item.text}}</span>
        </p>
        <p>
            <span v-for="(item,index) of list2" :key="index" :class="{Cred:item.flag===false}">{{item.text}}</span>
        </p>
        
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
        return {
            p1:'我是阳光又帅气的男生，我喜欢女生，我们不一样',
            p2:'我是可爱又美丽的女生，我喜欢男生，我们有啥不样',
            list1:[],
            list2:[],
           
        }
    },
    created () {
        this.getList()
    },
    methods: {
        // ...mapMutations({
        //     asideCur: `SET_ASIDE_CUR`
        // }),
        getList(){
            let len = this.p1.length < this.p2.length ?this.p2.length : this.p1.length
          
                for (let i = 0; i < len; i++) {
                    if (this.p1[i] === this.p2[i]) {
                        this.list1.push({
                            text: this.p1[i],
                            flag: true
                        })
                        this.list2.push({
                            text: this.p2[i],
                            flag: true
                        })
                    } else {
                        this.list1.push({
                            text: this.p1[i],
                            flag: false
                        })
                        this.list2.push({
                            text: this.p2[i],
                            flag: false
                        })
                    }
                }
                console.log(this.list1)
                console.log(this.list2)
        }
    },
    computed: {
        // ...mapGetters(['updateLeft'])
    },
    watch: {
       
    },
    filters: {

    }
}
</script>
<style>
.Cred{
    color: red  
}
</style>

代码如上 它实现了这样的效果

但是代码存在一个问题，就是同下标不同的字的可以加上颜色，但是不能下标字不一样的时候就出bug了，我也暂时想不出其他办法，希望掘友能够提供一个好的掘金办法