vue实现导航高亮显示---互斥

最新推荐文章于 2023-05-04 16:50:27 发布

C_guoqing

最新推荐文章于 2023-05-04 16:50:27 发布

阅读量565

点赞数

CC 4.0 BY-SA版权

文章标签： html css html5 vue.js

本文链接：https://blog.csdn.net/C_guoqing/article/details/120555649

本文介绍了如何在Vue中实现导航菜单的高亮显示。通过声明变量控制类名的添加，结合点击事件和下标判断，达到点击导航菜单后相应菜单变为绿色的效果。文章提供了完整的实现步骤和代码示例。

1. vue中代码准备

<template>
  <div>
    <div class="nav">
      <p v-for="(item, index) in navName" :key="index">{{ item }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navName: ["导航1", "导航2", "导航3", "导航4", "导航5"],
    };
  },
};
</script>

<style scoped>
.nav {
  width: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.green {
  color: #85f;
}
</style>>

展示到页面结果如图：
在这里插入图片描述

2. 实现目标：点击其中一个导航菜单，使其变成绿色

实现步骤：

2.1. 声明一个变量，来控制类是否添加

data() {
      return {
          isH: 0,      //新声明的变量，用来控制那个导航菜单可以添加类名
          navName: ["导航1", "导航2", "导航3", "导航4", "导航5"],
        };
 },

2.2 给 p 标签添加点击事件，同时获取点击时的下标（index）

 @click="changeCheck(index)"

// 同时在   methods 里添加方法 ，将获取到的下标赋值给 变量 isH
methods: {
    changeCheck(index) {
      this.isH = index;
    },
  },

2.3 给 p 标签添加类名（需要判断点击的是具体的那个对象）

:class="{ green: index === isH }"  
//  {类名：布尔值} 当布尔值为true是，类名添加成功，否则为false，添加失败
//  判断：如果结果为true，则添加类名成功。高亮显示成功

3 目标实现

3.1 完整代码如下:

<template>
  <div>
    <div class="nav">
      <p
        :class="{ green: index === isH }"
        @click="changeCheck(index)"
        v-for="(item, index) in navName"
        :key="index"
      >
        {{ item }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isH: 0,    // 初始值为0，表示默认打开浏览器，下标为  0 的元素时 第一个显示高亮的元素
      navName: ["导航1", "导航2", "导航3", "导航4", "导航5"],
    };
  },
  methods: {
    changeCheck(index) {
      this.isH = index;
    },
  },
};
</script>

<style scoped>
.nav {
  width: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
p {
  cursor: pointer;
}
.green {
  color: #85f;
}
</style>>