v-for实现点击每个元素设置其背景，当刷新页面时，恢复默认状态

小技巧，大作用

效果图：

代码：(核心见内部注解)

<template>
  <div class="page" v-if="showPage">
    <div
      class="number"
      v-for="(item,index) in currentPages"
      :key="index"
      @click="appoint(item,index)"
      //核心：绑定一个class属性，若isActive等于当前索引，则为其添加带有背景的样式
      :class="[isActive==index?'addBgColor':'']"
    >{{item}}</div>
    <div class="ellipsis" v-if="show">...</div>
    <div class="pre_next" @click="pre" v-if="show">&lt;</div>
    <div class="pre_next" @click="next" v-if="show">></div>
  </div>
</template>

 data() {
    return {
      currentPages: [],
      headPage: 1,
      newPage: 1,
      show: true,
      showPage: true, 
      //设置isActive的默认值为0，即第1页默认有背景色
      isActive: 0
    };
  },

methods: {
    getInitPages() {
     //每次刷新页面时，将isActive 的值修改为0，这样就能保证v-for中带有背景样式的是第1个，而不是以前的元素
      this.isActive = 0;
      this.show = true;
      this.showPage = true;
      this.currentPages = [];
      for (let i = 1; i <= this.totalPages; i++) {
        this.currentPages.push(i);
        if (i === 5) {
          break;
        }
      }
      if (this.totalPages <= 5) {
        this.show = false;
      }
      if (this.totalPages == 1) {
        this.showPage = false;
      }
    },