s3e38 v-for

2018-04-13 22:59:43 -04:00 · 2018-04-13 22:59:43 -04:00 · 250024e34b
commit 250024e34b
parent 25a3f1612a
2 changed files with 10 additions and 12 deletions
--- a/app.js
+++ b/app.js
@ -1,6 +1,10 @@
 var app = new Vue({
  el: '#app',
  data: {
-    show: true
+    ingredients: ['meat', 'fruit', 'cookies'],
+    persons: [
+      {name: "Max", age: 33, color: "red"},
+      {name: "Tyrel", age: 30, color: "blue"},
+    ]
  }
 });
--- a/index.html
+++ b/index.html
@ -7,17 +7,11 @@
  </head>
  <body>
    <div id='app'>
-      <button type="button" name="button" @click="show = !show">
-        Switch
-      </button>
-
-      <p v-if="show">You can see me</p>
-      <p v-else>Now you see me</p>
-      <template v-if="show">
-        <h1>Heading</h1>
-        <p>Inside a template</p>
-      </template>
-      <p v-show="show">Do you also see me?</p>
+      <ul>
+        <li v-for="ingredient in ingredients">
+          {{ ingredient }}
+        </li>
+      </ul>
    </div>
    <script src="app.js" charset="utf-8"></script>
  </body>