v-for渲染列表

src/pages/loginlist.vue

@@ -4,22 +4,9 @@
       <span> 上货统计：1个地址，10台机器，共计200份餐。 </span>
     </div>
     <div class="c2"><span>请选择机器</span></div>
-
-    <div class="c3"><span>1楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>3楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>5楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>6楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>7楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>8楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>9楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>10楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>11楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>12楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>12楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>13楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>14楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>15楼1号机</span><span>选择></span></div>
-    <div class="c3"><span>16楼1号机</span><span>选择></span></div>
+    <div class="c3" v-for="(item,index) in list " :key="index">
+      <span>{{item}}</span><span>选择></span>
+    </div>
   </div>
 </template>
 
@@ -52,3 +39,16 @@ span:nth-of-type(1) {
   font-weight: 600;
 }
 </style>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default {
+  data(){
+    let list:Array<string> = ['1楼1号机','2楼1号机','3楼1号机','5楼1号机','8楼1号机','9楼1号机','10楼1号机']
+    return{
+      list
+    }
+  },
+};
+</script>
\ No newline at end of file

src/router/index.ts

@@ -35,6 +35,7 @@ const routes: RouteConfig[] = [
     name: 'OperationBackground',
     component: () => import('../pages/operationBackground.vue'),
   },
+
 ];
 
 const router = new VueRouter({