diff --git "a/\347\216\213\346\241\245\345\205\201/.keep" "b/\347\216\213\346\241\245\345\205\201/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2321/zy.html" "b/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2321/zy.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d3ffeea3f40b1a253428c95c30c8971c93a20561
--- /dev/null
+++ "b/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2321/zy.html"
@@ -0,0 +1,49 @@
+<!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">
+    <link rel="stylesheet" href="./zy.css">
+    <title>Document</title>
+</head>
+
+<body id="app" v-cloak>
+    <ul>
+        <li> <img class="tp"
+                src="https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436">
+            {{home}}
+        </li>
+        <li> <img class="tp"
+                src="https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436">
+            {{car}}
+        </li>
+        <li> <img class="tp"
+                src="https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436">
+            {{food}}
+        </li>
+        <li> <img class="tp"
+                src="https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436">
+            {{drink}}
+        </li>
+    </ul>
+
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+    Vue.createApp({
+        data: () => {
+            return {
+                home: "700$",
+                car: "600$",
+                food: "500$",
+                drink: "400$",
+            }
+        }
+    }).mount("#app");
+
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2322/ts.html" "b/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2322/ts.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8ff3f8113ca5df6e32210416f84522342ca39bbe
--- /dev/null
+++ "b/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2322/ts.html"
@@ -0,0 +1,52 @@
+<!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">
+    <link rel="stylesheet" href="./zy.css">
+    <title>Document</title>
+</head>
+
+<body v-cloak>
+    <ul>
+        <li v-for:="item in good">
+            <div v-if="item.startnum>=0">
+                <div v-if="(item.endnum-item.startnum)>0">
+                    <div><img :src=item.img></div>
+                    <div>{{item.name}}</div>
+                    <div>{{item.price}}</div>
+                    <div>商品数量:{{item.endnum-item.startnum}}</div>
+                    <input type="number" placeholder="购买数量" v-model="item.startnum">
+                </div>
+                <div v-else="(item.endnum-item.startnum)>0">
+                    商品已售完
+                </div>
+            </div>
+            <div v-else="">
+                错误
+            </div>
+        </li>
+    </ul>
+
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+    Vue.createApp({
+        data: () => {
+            return {
+                good: [
+                    { name: "商品名称:房子", price: "商品价格:700$", startnum: '', endnum: 100, img: "https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436" },
+                    { name: "商品名称:房子", price: "商品价格:800$", startnum: '', endnum: 200, img: "https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436" },
+                    { name: "商品名称:房子", price: "商品价格:900$", startnum: '', endnum: 300, img: "https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436" },
+                    { name: "商品名称:房子", price: "商品价格:500$", startnum: '', endnum: 400, img: "https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436" }
+                ]
+            }
+        }
+    }).mount("body");
+
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2323/let.html" "b/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2323/let.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8673408930d3661628815abd5b29e7b5f0a1529f
--- /dev/null
+++ "b/\347\216\213\346\241\245\345\205\201/\344\275\234\344\270\2323/let.html"
@@ -0,0 +1,63 @@
+<!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">
+    <link rel="stylesheet" href="./zy.css">
+    <title>Document</title>
+</head>
+<!-- 添加  新增 和 删除 的按钮,点新增 会加入对应的一条数据，点删除删除对应的商品 -->
+
+<body v-cloak>
+    <input @click="add" type="submit" value="新增">
+    <div class="let" v-for:="item,index in good">
+        <div v-if="item.startnum>=0">
+            <div v-if="(item.endnum-item.startnum)>0">
+                <div><img :src=item.img></div>
+                <div>{{item.name}}</div>
+                <div>{{item.price}}</div>
+                <div>商品数量:{{item.endnum-item.startnum}}</div>
+                <input type="number" placeholder="购买数量" v-model="item.startnum">&nbsp;&nbsp;
+                <input @click="del(index)" type="submit" value="删除">
+            </div>
+            <div v-else="(item.endnum-item.startnum)>0">
+                商品已售完
+            </div>
+        </div>
+        <div v-else="">
+            错误
+        </div>
+    </div>
+
+
+
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+    Vue.createApp({
+
+        data: () => {
+            return {
+                good: [
+                    { name: "商品名称:房子", price: "商品价格:700$", startnum: '', endnum: 100, img: "https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436" }
+                ]
+            }
+        }, methods: {//记得这个是复数形式
+            add: function (index) {
+                this.good.push({ name: "商品名称:房子", price: "商品价格:700$", startnum: '', endnum: 100, img: "https://img1.baidu.com/it/u=1493168513,4293220534&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=436" })
+
+            },
+            del: function (index) {
+                this.good.splice(index, 1)
+
+            }
+
+        }
+    }).mount("body");
+
+
+</script>
+
+</html>
\ No newline at end of file
