PLaying around with some data

src/App.vue

@@ -1,10 +1,50 @@
 <template>
- <h1>Transit Board</h1>
+ <div id="app">
+  <section>
+   <h1>Transit Board</h1>
+   <p>
+    {{ time }}
+   </p>
+  </section>
+  <section>
+   <ul>
+    <li v-for="bus in buses" v-bind:key="bus.name">
+      <h2>🚌 {{ bus.name }}</h2>
+      <ul>
+        <li v-for="arrival in bus.previous" v-bind:key="arrival.time">
+         {{ arrival.time }}
+        </li>
+        <li v-for="arrival in bus.next" v-bind:key="arrival.time">
+         {{ arrival.time }}
+        </li>
+      </ul>
+    </li>
+  </ul>
+  </section>
+ </div>
 </template>
 
 <script>
 export default {
   name: 'app',
+  data: function () {
+    return {
+        time: '12:28',
+        buses: [
+          {
+            name: '45',
+            previous: [
+                {time: '-12:34'},
+                {time:  '-0:00'}
+            ],
+            next: [
+                {time:  '3:10'},
+                {time: '15:00'}
+            ]
+          }
+        ]
+    }
+  }
 }
 </script>