vue 点击选中效果

1、创建

<!--
 * @Description: 菜单DEMO
 * @Author: PengShuai
 * @Date: 2022-02-17 09:16:19
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-02-17 10:27:49
-->
<template>
  <div class="menuDemo">
    <ul>
      <li
        v-for="(item, index) in menuDemoList"
        :key="index"
        :class="activeIndex === index ? 'active' : ' '"
        @click="onClick(index)"
      >
        {{ item.value }}
      </li>
    </ul>
  </div>
</template>

2、数据

  data() {
    return {
      // 数据
      menuDemoList: [
        {
          key: '01',
          value: '测试1',
        },
        {
          key: '02',
          value: '测试2',
        },
        {
          key: '03',
          value: '测试3',
        },
        {
          key: '04',
          value: '测试4',
        },
        {
          key: '05',
          value: '测试5',
        },
      ],
      // 下角标
      activeIndex: null,
    }
  },

3、事件

  methods: {
    // 点击事件
    onClick(index) {
      this.activeIndex = index
    },
  },

4、样式表

li {
  list-style-type: none;
}
.menuDemo {
  width: 200px;
  height: 100%;
  font-size: 18px;
  ul {
    li {
      border: 1px solid #ddd;
      text-align: center;
      padding: 20px;
      cursor: pointer;
    }
  }
  // 选中样式
  .active {
    background-color: red;
    color: #fff;
    position: relative;
    &::after {
      content: '';
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-right: 20px solid #fff;
      border-bottom: 10px solid transparent;
      position: absolute;
      right: 0;
      top: calc(50% - 10px);
    }
  }
}

5、例