鼠标点击后,文字颜色改变

这个博客展示了如何使用Vue.js实现导航条的高亮切换功能。通过遍历navgator数组并设置点击事件,改变被选中项的颜色。代码中定义了changeColor方法,当点击某个导航项时,其他项的ischeck属性设为false,当前项设为true,实现了导航条的交互效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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>

鼠标点击过后,文字颜色改变

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值