<template>
<--导航条-->
<div class="navList">
<p
class="navgatorLi"
:class="{checkColor:item.ischeck}"
v-for="(item,index) in navgator"
:key="index"
@click="changeColor(index)"
>
{{item.title}}
</p>
</div>
</template>
export default {
data() {
return {
navgator: [
{
title: '主页',
ischeck:false
},
{
title: '产品介绍',
ischeck:false
},
{
title: '智能单词',
ischeck:false
},
{
title: '智能听说',
ischeck:false
},
{
title: '下载中心',
ischeck:false
},
{
title: '关于我们',
ischeck:false
}
],
status:0,
}
},
methods: {
changeColor(index) {
// 鼠标点击后 导航变色
this.navgator[this.status].ischeck = false
this.navgator[index].ischeck = true
this.status = index
}
}
}
<style>
.navList {
p {
color: #fff;
}
.checkColor{
color: #307AF3;
}
}
</style>
