diff --git "a/\346\233\276\351\235\222\345\207\244/thing.html" "b/\346\233\276\351\235\222\345\207\244/thing.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b1ac39422d343eb95e6f1062b429b8cc296440cd
--- /dev/null
+++ "b/\346\233\276\351\235\222\345\207\244/thing.html"
@@ -0,0 +1,47 @@
+<!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>商品列表1</title>
+</head>
+<body>    
+    <div  id="app">
+
+        <ul>
+            <li v-for="i in list ">
+
+
+                <div>{{i.name}}</div>
+                <div>{{i.price}}</div>
+                <div><img width="100" v-bind:src="i.image"></div>
+
+
+            </li>
+        </ul>
+
+    </div>
+</body>
+
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+
+<script>
+Vue.createApp({
+    data:()=>{
+        return{
+            list:[
+
+            {name:'HelloKitty猫',price:2888,image:'https://img1.baidu.com/it/u=1032192203,1544301116&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
+            {name:'美乐蒂',price:2888,image:'https://img0.baidu.com/it/u=1029514935,133898196&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
+            {name:'库洛米',price:2888,image:'http://t13.baidu.com/it/u=1903623593,2772273567&fm=224&app=112&f=JPEG?w=375&h=500'}
+
+
+            ]
+        }
+    }
+}).mount("#app")
+
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\233\276\351\235\222\345\207\244/thing2.html" "b/\346\233\276\351\235\222\345\207\244/thing2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..32fcd27e86cbd1f7e727163f700dc145670718e5
--- /dev/null
+++ "b/\346\233\276\351\235\222\345\207\244/thing2.html"
@@ -0,0 +1,51 @@
+<!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>商品列表2</title>
+</head>
+<body>    
+    <div  id="app">
+
+        <ul>
+            <li v-for="i in list ">
+
+            <div v-if="(i.totalnum-i.buynum)>0">
+                <div>商品-------{{i.name}}</div>
+                <div><img width="100" v-bind:src="i.image"></div>
+                <div>价格-------{{i.price}}</div>
+                <div>剩余------{{Number(i.totalnum)-Number(i.buynum)}}</div>
+                <div>购买<input v-model="i.buynum"></div>
+         
+            </div>
+
+
+            </li>
+        </ul>
+
+    </div>
+</body>
+
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+
+<script>
+Vue.createApp({
+    data:()=>{
+        return{
+            list:[
+
+            {name:'HelloKitty猫',price:2888,totalnum:100,buynum:0,image:'https://img1.baidu.com/it/u=1032192203,1544301116&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
+            {name:'美乐蒂',price:2888,totalnum:100,buynum:0,image:'https://img0.baidu.com/it/u=1029514935,133898196&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
+            {name:'库洛米',price:2888,totalnum:100,buynum:0,image:'http://t13.baidu.com/it/u=1903623593,2772273567&fm=224&app=112&f=JPEG?w=375&h=500'}
+
+
+            ]
+        }
+    }
+}).mount("#app")
+
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\233\276\351\235\222\345\207\244/\345\225\206\345\223\201\345\242\236\345\212\240\345\210\240\351\231\244.html" "b/\346\233\276\351\235\222\345\207\244/\345\225\206\345\223\201\345\242\236\345\212\240\345\210\240\351\231\244.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0838c3fbbd0e68c1a6b58001dabe59e45ec8f208
--- /dev/null
+++ "b/\346\233\276\351\235\222\345\207\244/\345\225\206\345\223\201\345\242\236\345\212\240\345\210\240\351\231\244.html"
@@ -0,0 +1,64 @@
+<!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>商品列表3</title>
+</head>
+<body>    
+    <div  id="app" v-clock>
+
+        <ul>
+            <li v-for="i in list ">
+            <div v-if="(i.totalnum-i.buynum)>0">
+                <div>商品-------{{i.name}}</div>
+                <div><img width="100" v-bind:src="i.image"></div>
+                <div>价格-------{{i.price}}</div>
+                <div>剩余------{{Number(i.totalnum)-Number(i.buynum)}}</div>
+                <div>购买<input v-model="i.buynum"></div>
+                <button @click="deleteThing(i.id)">删除商品</button>
+            </div>
+            </li>
+
+            <button @click="addThing">增加商品</button>
+
+        </ul>
+
+    </div>
+</body>
+
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+
+<script>
+Vue.createApp({
+    data:()=>{
+        return{
+            list:[
+
+            {id:0,name:'HelloKitty猫',price:2888,totalnum:100,buynum:0,image:'https://img1.baidu.com/it/u=1032192203,1544301116&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
+            {id:1,name:'美乐蒂',price:2888,totalnum:100,buynum:0,image:'https://img0.baidu.com/it/u=1029514935,133898196&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
+            {id:2,name:'库洛米',price:2888,totalnum:100,buynum:0,image:'http://t13.baidu.com/it/u=1903623593,2772273567&fm=224&app=112&f=JPEG?w=375&h=500'}
+
+
+            ]
+        }
+    },
+
+    methods:{
+        addThing(){
+            let a = this.list;
+            a.push({name:'玉桂狗',price:2888,totalnum:100,buynum:0,image:'http://t15.baidu.com/it/u=2549190892,2130847126&fm=224&app=112&f=JPEG?w=500&h=500'})
+            this.list=a;
+        },
+        deleteThing(id){
+            console.log(id);
+            this.list.splice(id,1)
+        }
+
+    }
+}).mount("#app")
+
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\233\276\351\235\222\345\207\244/\345\225\206\345\223\201\350\256\241\347\256\227\345\261\236\346\200\247.html" "b/\346\233\276\351\235\222\345\207\244/\345\225\206\345\223\201\350\256\241\347\256\227\345\261\236\346\200\247.html"
new file mode 100644
index 0000000000000000000000000000000000000000..38be6e47ffdf4ebd2634179e5c8a6f4486579c03
--- /dev/null
+++ "b/\346\233\276\351\235\222\345\207\244/\345\225\206\345\223\201\350\256\241\347\256\227\345\261\236\346\200\247.html"
@@ -0,0 +1,95 @@
+<!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>商品-计算属性</title>
+</head>
+<body>    
+    <div  id="app" v-clock>
+
+        <ul>
+            <li v-for="i,index in list ">
+            <div v-if="(i.totalnum-i.buynum)>0">
+                <div>商品-------{{i.name}}</div>
+                <div><img width="100" v-bind:src="i.image"></div>
+                <div>价格-------{{i.price}}</div>
+                <div>剩余------{{Number(i.totalnum)-Number(i.buynum)}}</div>
+                <div>购买<input v-model="i.buynum"></div>
+                <button @click="deleteThing(index)">删除商品</button>
+                <button @click="addThing(index)">增加商品</button>
+            </div>
+            </li>
+
+    
+
+        </ul>
+
+    </div>
+</body>
+
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+
+<script>
+Vue.createApp({
+    data:()=>{
+        return{
+            num:10,
+            obj:{
+                name:'js'
+            },
+            list:[
+            {name:'HelloKitty猫',price:2888,totalnum:100,buynum:0,image:'https://img1.baidu.com/it/u=1032192203,1544301116&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
+            {name:'美乐蒂',price:2888,totalnum:100,buynum:0,image:'https://img0.baidu.com/it/u=1029514935,133898196&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},
+            {name:'库洛米',price:2888,totalnum:100,buynum:0,image:'http://t13.baidu.com/it/u=1903623593,2772273567&fm=224&app=112&f=JPEG?w=375&h=500'}
+
+
+            ]
+        }
+    },
+
+    methods:{
+        addThing(index){
+            this.list.push(this.list[index])
+        },
+        deleteThing(index){
+            console.log(index);
+            this.list.splice(index,1)
+        }
+    },
+    watch:{
+        
+        list:{
+            handler(newNum,oldNum){
+
+                console.log(newNum);
+                console.log("------------------");
+                console.log(oldNum);
+                newNum.forEach(element => {
+                    if ((element.totalnum-element.buynum)<=1) {
+                        alert("购买数量超出范围")
+                    }
+                });
+            },
+            deep:true
+        },
+
+
+
+        num:function(val,oldNum){
+            console.log("",val,oldNum);
+        },
+
+        
+        'obj.name':function(newNum,old){
+            console.log(newNum,old);
+        }
+    },
+
+
+}).mount("#app")
+
+</script>
+</html>
\ No newline at end of file
