From ea50509d30733f49295eaccb0678e4cc562de3de Mon Sep 17 00:00:00 2001
From: Your Name <2968864942>
Date: Tue, 29 Mar 2022 17:06:37 +0800
Subject: [PATCH] zy

---
 .../1.html"                                   | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 "\345\221\250\347\220\206\346\264\262/VUE\344\275\234\344\270\232/vue\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1.html"
diff --git "a/\345\221\250\347\220\206\346\264\262/VUE\344\275\234\344\270\232/vue\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1.html" "b/\345\221\250\347\220\206\346\264\262/VUE\344\275\234\344\270\232/vue\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1.html"
new file mode 100644
index 0000000..31be4cf
--- /dev/null
+++ "b/\345\221\250\347\220\206\346\264\262/VUE\344\275\234\344\270\232/vue\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1.html"
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<style>
+    table {
+        width: 500px;
+        margin: 100px auto;
+        border-collapse: collapse;
+        text-align: center;
+    }
+    
+    td,
+    th {
+        border: 1px solid #333;
+    }
+    
+    thead tr {
+        height: 40px;
+        background-color: #ccc;
+    }
+</style>
+
+<body>
+
+    <table id="el">
+        <thead>
+            <tr>
+                <th>科目</th>
+                <th>姓名</th>
+                <th>成绩</th>
+            </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+
+
+</body>
+<script>
+    let vm = new Vue({
+        el: "#el",
+        data: {
+            message: [{
+                subject: "vue",
+                name: "周",
+                grade: 60
+            }, {
+                subject: "vue",
+                name: "张",
+                grade: 60
+            }, {
+                subject: "vue",
+                name: "刘",
+                grade: 60
+            }, {
+                subject: "vue",
+                name: "陈",
+                grade: 60
+            }, {
+                subject: "vue",
+                name: "杨",
+                grade: 60
+            }]
+        }
+    });
+    let tbody = document.querySelector("tbody");
+    for (let i = 0; i < vm.message.length; i++) {
+        let tr = document.createElement('tr');
+        tbody.append(tr);
+        for (const key in vm.message[i]) {
+            let td = document.createElement("td");
+            td.innerHTML = vm.message[i][key]
+            tr.append(td);
+        }
+    }
+</script>
+
+</html>
\ No newline at end of file
-- 
Gitee

