vue3.0简单实现点击li改变列表颜色

最新推荐文章于 2024-04-19 15:58:03 发布

怎奈你何

最新推荐文章于 2024-04-19 15:58:03 发布

阅读量1.1k

点赞数

分类专栏： vue html 文章标签：前端 vue.js

原文链接：https://blog.csdn.net/Jet_Lover/article/details/122616325

版权

html 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

vue

13 篇文章 1 订阅

订阅专栏

默认选择的第一个，当选择第二个时，只有第二个变颜色请添加图片描述

请添加图片描述
html代码

      <ul>
        <li
          :class="{ actived: index == isactive }"
          v-for="(item, index) in textList"
          :key="index"
          @click="nameSelect(item.name, index)"
        >
          {{ item.name }}
        </li>
      </ul>

CSS代码

    ul {
      display: flex;
      margin-left: 55px;
      li {
        padding: 11px 20px;
        margin-left: 13px;
        border-radius: 2px 0px 0px 2px;
        opacity: 1;
        border: 1px solid #59bad5;
        font-size: 22px;
        font-weight: 400;
        color: #3aaeff;
        cursor: pointer;
      }
      .actived {
        font-weight: 600;
        color: red;
      }
    }

vue3.0的JS关键代码

  setup() {
    const textList = [
      { name: "成都大学锦江学院店" },
      { name: "成都文理店" },
      { name: "成都理工店" },
      { name: "四川大学店" },
      { name: "电子科大店" },
      { name: "其它" }
    ];
    const isactive = ref(0);
    const nameSelect = (res, index) => {
      console.log(res, index);
      isactive.value = index;
    };
    return {textList, nameSelect, isactive };
  }