记：vue tab切换（定时切换）

<template>
    <div>

      <div class="tab_con">
        <div
          v-for="(item,index) in data"
          :key="index"
          :style="{display:i===index ? 'block' : 'none'}"
        >
          {{item}}
        </div>
      </div>

      <div class="tab">
        <div
          v-for="(item,index) in data"
          :key="index"
          @click="tab(index)"
        >
          {{item.name}}
        </div>
      </div>

    </div>
</template>

<script>
  export default {
    name: "FunctionScore",
    data() {
      return {
        i: 0,
        data: [],
        timer: null // 定时器
      }
    },
    created() {
    },
    mounted () {
      this.getData()
      this.timer = setInterval(() => {
        this.i += 1;
        if(this.i>4){
          this.i = 0; // 循环
        }
      }, 1000);
    },
    // 销毁定时器
    destroyed () {
      clearInterval(this.timer);
      this.timer = null;
    },
    methods: {
      async getData() {
        this.data = [
          { name: '单位1', value: 11, percent: '11%' },
          { name: '单位2', value: 22, percent: '22%' },
          { name: '单位3', value: 33, percent: '33%' },
          { name: '单位4', value: 44, percent: '44%' },
          { name: '单位5', value: 55, percent: '55%' }
        ]
      },
      tab(index){
        this.i = index;
      }
    }
  };
</script>

<style lang="scss" scoped>

</style>