[ADD]列表渲染

2020-10-09 16:05:30 +08:00 · 2020-10-09 16:05:30 +08:00 · 61523c08ca
parent 1ad923cac6
commit 61523c08ca
1 changed files with 95 additions and 0 deletions
--- a/列表渲染.html
+++ b/列表渲染.html
@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  </head>
+  <body>
+    <!--[if lt IE 7]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+
+    <ul id="example-1">
+      <li v-for="item in items">
+        {{ item.message }}
+      </li>
+    </ul>
+
+    <ul id="example-2">
+      <li v-for="(item, index) in items"> 
+        {{ parentMessage }} - {{ index }} - {{ item.message }}
+      </li>
+    </ul>
+
+    <ul id="example-3">
+      <template v-for="item in items">          
+        <li> {{item.message}}</li>
+        <hr>
+      </template>
+    </ul>
+
+    <ul id="repeat-object" class="demo">
+      <li v-for="(value, key, index) in object">
+        {{index}} . {{ key }} - {{ value }}
+      </li>
+    </ul>
+
+    <div>
+      <span v-for="n in 10">{{ n }}</span>
+    </div>
+    
+    <script>
+      var example1 = new Vue({
+        el: '#example-1',
+        data: {
+          items: [
+            { message: 'foo' },
+            { message: 'bar' }
+          ]
+        }
+      })
+
+      var example2 = new Vue({
+        el: '#example-2',
+        data: {
+          parentMessage: 'Parent',
+          items: [
+            {message: 'foo'},
+            {message: 'bar'}
+          ]
+        }
+      })
+
+      var example3 = new Vue({
+        el: '#example-3',
+        data: {
+          items: [
+            { message: 'foo' },
+            { message: 'bar' }
+          ]
+        }
+      })
+
+      var repeatObject = new Vue({
+        el: '#repeat-object',
+        data: {
+          object: {
+            FirstName: 'John',
+            LastName: 'Doe',
+            Age: 30
+          }
+        }
+      })
+
+    </script>
+  </body>
+</html>