From 359d91c5a8c5c2a11e8e445e7d7561c8050b9720 Mon Sep 17 00:00:00 2001
From: unknown <2642334586@qq.com>
Date: Wed, 13 Apr 2022 16:52:53 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2022413/index.html"                       | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 "\345\255\231\346\237\217\345\263\273/2022413/index.html"
diff --git "a/\345\255\231\346\237\217\345\263\273/2022413/index.html" "b/\345\255\231\346\237\217\345\263\273/2022413/index.html"
new file mode 100644
index 0000000..259927a
--- /dev/null
+++ "b/\345\255\231\346\237\217\345\263\273/2022413/index.html"
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>Document</title>
+    <style>
+        #main{
+            width: 100vw;
+            height: 100vh;
+            background-color: aquamarine;
+        }
+        .content{
+            width: 800px;
+            height: 400px;
+            background-color: white;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin:  auto;
+        }
+        .list li{
+            list-style: none;
+            display: inline-flex;
+            margin-top: 30px;
+            margin-left: 50px;
+        }
+        img{
+            width: 120px;
+            height: 120px;
+        }
+
+    </style>
+</head>
+<body>
+    <div id="main">
+        <div class="content">
+            <commodity v-for="key in arrs" :arrs="key"></commodity>
+            
+        </div>
+    </div>
+</body>
+<script>
+    new Vue({
+        el:'#main',
+        data:{
+            arrs:[
+                {name:"书",price:'20$',introduce:'这是一本书',url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fimages03%2F20200601%2F53b43699e59c467c82b666f645ba4bd4.jpeg&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652430830&t=fbb14a674d02835f5dcefbf333bf457f'},
+                {name:"笔",price:'10$',introduce:'这是一支笔',url:'https://img0.baidu.com/it/u=4139715035,3087945105&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'}
+            ]
+        }
+        
+        ,
+        components:{
+            
+            commodity:{
+                props:['arrs'],
+                template:"<ul class='list'><li>商品名称:{{arrs.name}}</li><li>商品介绍:{{arrs.introduce}}</li><li>商品价格:{{arrs.price}}</li><img :src=arrs.url></Ul>"
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
-- 
Gitee

