某天一個朋友問我兩段話怎麼找出不一樣的字而後給顏色呢。 因而我就嘗試了下vue
<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>
複製代碼
代碼如上 它實現了這樣的效果vuex
可是代碼存在一個問題,就是同下標不一樣的字的能夠加上顏色,可是不能下標字不同的時候就出bug了,我也暫時想不出其餘辦法,但願掘友可以提供一個好的掘金辦法