vue选项组通过点击实现Class切换

最新推荐文章于 2024-04-11 15:20:18 发布

原创最新推荐文章于 2024-04-11 15:20:18 发布 · 502 阅读

1 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

17 篇文章

订阅专栏

本文介绍如何在Vue.js项目中实现一个动态高亮的导航栏，通过使用v-for指令生成选项组，并利用v-bind绑定class实现点击切换高亮效果。

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

首先使用v-for指令动态生成选项组

html

<ul class="content clear">
        <li v-for="(item, index) in items" :key="index">{{item.title}}</li>
      </ul>

data() {
    return {
      items: [
        { title: '首页' },
        { title: '消息' },
        { title: '发现' },
        { title: '关于' },
        { title: '联系我们' },
      ],
    };
  },

在data中定义一个变量来存储当前点击的元素索引（index）

return {
      activeIndex: 0, // 0为默认选中第一项，-1为不选

在li标签中添加点击事件和在methods中写addClass方法

html

<li @click="addClass(index)"  // 这里需要传index

methods: {
    addClass(index) {
      this.activeIndex = index; // 把当前所点击元素的index，赋值给activeIndex
    },
  },

使用v-bind绑定class

html

<li :class="activeIndex === index ? 'active':''"

定义动态类的样式

.active{
    color: #fff;
    background-color: #42b983;
  }

在这里插入图片描述
全部代码：

<template>
    <div class="info">
      <ul class="content clear">
        <li :class="activeIndex === index ? 'active':''"
            @click="addClass(index)"
            v-for="(item, index) in items"
            :key="index">
            {{item.title}}
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  name: 'Info',
  data() {
    return {
      activeIndex: 0, // 0为默认选中第一项，-1为不选
      items: [
        { title: '首页' },
        { title: '消息' },
        { title: '发现' },
        { title: '关于' },
        { title: '联系我们' },
      ],
    };
  },
  methods: {
    addClass(index) {
      this.activeIndex = index; // 把当前所点击元素的index，赋值给activeIndex
    },
  },
};
</script>

<style lang="scss">
  .info{
    width: 400px;
    margin: 0 auto;
    .content{
      li{
        list-style: none;
        float: left;
        padding: 10px;
        cursor: pointer;
      }
    }
  }
  .active{
    color: #fff;
    background-color: #42b983;
  }
  .clear{
    content: '';
    display: table;
    clear: both;
  }
</style>