搞搞搞

src/views/History.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="history">
     <h1>
-      {{ 'sdfsdfsdfsdf' }}
+      {{ timeList[activeTimeId] }}
     </h1>
     <menu>
       <img
@@ -18,68 +18,15 @@
       >
       <ul>
         <li
-          :class="{active: activeTimeId === 0}"
-          @click="activeTimeId = 0"
+          v-for="(time, idx) in timeList"
+          :key="idx"
+          :class="{active: activeTimeId === idx}"
+          @click="activeTimeId = idx"
         >
           <div
             class="point"
-          />开埠通商
-        </li>
-        <li
-          :class="{active: activeTimeId === 1}"
-          @click="activeTimeId = 1"
-        >
-          <div
-            class="point"
-          />曲折发展
-        </li>
-        <li
-          :class="{active: activeTimeId === 2}"
-          @click="activeTimeId = 2"
-        >
-          <div
-            class="point"
-          />步履维艰
-        </li>
-        <li
-          :class="{active: activeTimeId === 3}"
-          @click="activeTimeId = 3"
-        >
-          <div
-            class="point"
-          />筚路蓝缕
-        </li>
-        <li
-          :class="{active: activeTimeId === 4}"
-          @click="activeTimeId = 4"
-        >
-          <div
-            class="point"
-          />改革开放
-        </li>
-        <li
-          :class="{active: activeTimeId === 5}"
-          @click="activeTimeId = 5"
-        >
-          <div
-            class="point"
-          />战略负重
-        </li>
-        <li
-          :class="{active: activeTimeId === 6}"
-          @click="activeTimeId = 6"
-        >
-          <div
-            class="point"
-          />创新驱动
-        </li>
-        <li
-          :class="{active: activeTimeId === 7}"
-          @click="activeTimeId = 7"
-        >
-          <div
-            class="point"
-          />追梦未来
+          />
+          {{ time }}
         </li>
       </ul>
     </menu>
@@ -88,15 +35,27 @@
 
 <script>
 import {
-  ref
+  ref,
+  reactive,
 } from 'vue'
 
 export default {
   name: 'HistoryView',
   setup () {
+    const timeList = reactive([
+      '开埠通商',
+      '曲折发展',
+      '步履维艰',
+      '筚路蓝缕',
+      '改革开放',
+      '战略负重',
+      '创新驱动',
+      '追梦未来',
+    ])
     const activeTimeId = ref(0)
 
     return {
+      timeList,
       activeTimeId,
     }
   }