vue -内容跟着标题如何切换

问题：
点击右边箭头fun2，数组的内容往右边依次走，h1展示数组最中间的年龄，
点击左边箭头fun，数组的内容往左边依次走，h1展示数组最中间的年龄，

<template>
  <div id="root">

    <h1>{{ageAge}}</h1>

    <span class="dianji_left" @click="fun()">《</span>

    <span class="span_one" v-for="(item, index) in dataOne" :key="index">{{
      item.name
    }}</span>

    <span class="dianji_right" @click="fun2()">》</span>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      dataOne: [
        {
          name: "李三",
          age:13
        },
        {
          name: "李四",
          age:14
        },
        {
          name: "李五",
          age:15
        },
        {
          name: "李六",
          age:16
        },
        {
          name: "李七",
          age:17
        },
      ],
      ageAge:15
    };
  },
  methods: {
    fun() {},
    fun2() {

    },
  },
};
</script>
<style  scoped>

.span_one {
  margin-left: 10px;
  margin-right: 10px;
}
.dianji_left,
.dianji_right {
  cursor: pointer;
  background-color: #ccc;
}
</style>

fun () {
        const last = this.dataOne.pop()
        this.dataOne.unshift(last)
        this.ageAge = this.dataOne[Math.ceil(this.dataOne.length / 2)].age
      },
      fun2 () {
        const last = this.dataOne.shift()
        this.dataOne.push(last)
        this.ageAge = this.dataOne[Math.ceil(this.dataOne.length / 2)].age
      }