某天一个朋友问我两段话怎么找出不一样的字而后给颜色呢。 因而我就尝试了下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