jquery给当前点击子元素添加样式，新增vue版

jquery 版本

         <div class="part_2">
            <div class="box active">
                <div class="top">￥0.96/天</div>
                <div class="bottom">
                    <p>1个月</p>
                    <p>￥29</p>
                    <p>￥49</p>
                </div>
            </div>
            <div class="box">
                <div class="top">￥0.76/天</div>
                <div class="bottom">
                    <p>3个月</p>
                    <p>￥69</p>
                    <p>￥129</p>
                </div>
            </div>
            <div class="box">
                <div class="top">￥0.54/天</div>
                <div class="bottom">
                    <p>1年</p>
                    <p>￥119</p>
                    <p>￥289</p>
                </div>
            </div>
        </div>



        $('.part_2 .box').click(function (item) {
            var index = $('.part_2 .box').index(this);
            $('.part_2 .box').eq(index).addClass('active').siblings().removeClass('active');
        });

vue 版本 01

      <template>
        <el-card>
          <div class="wrapper">
            <div
              class="box"
              v-for="(item, index) in recharge"
              :key="index"
              @click="switchSelected(index)"
              :class="{ active: actived == index }"
            >
              <div class="top">{{ item.transform }}</div>
              <div class="bottom">
                <p>{{ item.time }}</p>
                <p>{{ item.price }}</p>
                <p>{{ item.discount_price }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </template>

      <script>
      export default {
        data() {
          return {
            actived: -1,
            recharge: [
              {
                id: 1,
                time: "1个月",
                discount_price: "￥29",
                price: "￥49",
                transform: "0.96/天",
              },
              {
                id: 2,
                time: "3个月",
                discount_price: "￥69",
                price: "￥129",
                transform: "0.76/天",
              },
              {
                id: 3,
                time: "1年",
                discount_price: "￥119",
                price: "￥289",
                transform: "0.54/天",
              },
            ],
          };
        },
        methods: {
          switchSelected(index) {
            this.actived = index;
          },
        },
      };
      </script>

      <style>
      .box {
          width: 260px;
          height: 325px;
          background: #2a2d2b;
          border-radius: 40px;
          border: 4px solid #25292d;
          transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
      .active {
          border: 4px solid #32b16c;
      }
      </style>

vue 版本 02

<template>
  <div class="wrapper-tabbar">
    <ul class="nav">
      <li class="nav-item" v-for="(item, index) in tab_data" :key="index" @click="switchSelected(index,item)" :class="{ active: actived == index }">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tab_data: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      data: this.tab_data,
      actived: 0,
    };
  },
  methods: {
    switchSelected(index, name) {
      this.actived = index;
      this.$emit("current", index, name);
    },
  },
};
</script>

<style lang="less">
.wrapper-tabbar {
  .nav {
    display: flex;

    .nav-item {
      cursor: pointer;
      margin: 20px 20px 0 20px;
      padding-bottom: 20px;
      -webkit-app-region: no-drag;
    }
    .active {
      position: relative;
      color: @main-font-hover;
      opacity: 1;
    }

    .active::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: 0;
      left: calc(50% - 37.5px);
      width: 74px;
      height: 37px;

      background-image: url("../assets/images/header/light.png");
    }
  }
}
</style>