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 版本

      <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 {
           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>