列表学习1

2 years ago · ea40c8296a
parent 8c0906cf47
commit ea40c8296a
2 changed files with 100 additions and 0 deletions
--- a/12_列表筛选/1.基本列表.html
+++ b/12_列表筛选/1.基本列表.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>基本列表</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+<!--    遍历列表-->
+    <h2>人员列表</h2>
+    <button @click.once="addPerson">添加一个人</button>
+    <ul>
+        <!--        方法一-->
+        <!--        <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>-->
+        <!--        方法二-->
+        <li v-for="(data, index) in listData" :key="data.id">
+            {{data.name}} - {{data.age}}
+            <input type="text">
+        </li>
+
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            listData: [
+                {id: 1, name: '张三', age: 18},
+                {id: 2, name: '李四', age: 19},
+                {id: 3, name: '王五', age: 20}
+            ]
+        },
+        methods:{
+            addPerson() {
+                const p = {id: 0, name: "赵老大", age: 80}
+                this.listData.unshift(p)
+            }
+        }
+    })
+
+</script>
+</html>
--- a/12_列表筛选/2.Key的原理.html
+++ b/12_列表筛选/2.Key的原理.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>基本列表</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+<!--    遍历列表-->
+    <h2>人员列表</h2>
+    <ul>
+        <!--        方法一-->
+        <!--        <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>-->
+        <!--        方法二-->
+        <li v-for="(data, index) in listData" :key="index">{{data.name}} - {{data.age}}</li>
+    </ul>
+<!--        遍历对象-->
+    <h2>汽车信息</h2>
+    <ul>
+        <li v-for="(key, value) of car" :key="key">{{key}} - {{value}}</li>
+    </ul>
+<!--        遍历字符串-->
+    <h2>字符串信息</h2>
+    <ul>
+        <li v-for="(c, index) of testStr" :key="index">{{c}} - {{index}}</li>
+    </ul>
+<!--        遍历固定次数-->
+    <h2>固定遍历</h2>
+    <ul>
+        <li v-for="(number, index) of 5" :key="index">{{number}} - {{index}}</li>
+    </ul>
+</div>
+</body>
+<script type="text/javascript">
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            listData: [
+                {id: 1, name: '张三', age: 18},
+                {id: 2, name: '李四', age: 19},
+                {id: 3, name: '王五', age: 20}
+            ],
+            car: {
+                name: "特斯拉",
+                model: "Model3",
+                price: "29.9w"
+            },
+            testStr: "Hello!"
+        }
+    })
+
+</script>
+</html>