diff --git "a/\345\221\250\350\212\267\350\216\271/20230323-Apple Store/iPhone.html" "b/\345\221\250\350\212\267\350\216\271/20230323-Apple Store/iPhone.html"
new file mode 100644
index 0000000000000000000000000000000000000000..af9479837615d95d31c542faca9954d88d30cbdb
--- /dev/null
+++ "b/\345\221\250\350\212\267\350\216\271/20230323-Apple Store/iPhone.html"	
@@ -0,0 +1,80 @@
+<!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">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <title>iPhone商城</title>
+</head>
+    <!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    .goods{
+        width: 900px;
+        height: 400px;
+        /* background-color: cadetblue; */
+        margin:auto
+    }
+    .box{
+        width: 900px;
+        height: 300px;
+        /* background-color: blue; */
+        margin-top: 7px;
+        display: flex;
+        justify-content: space-around;
+    }
+    .list{
+        margin-top: 25px;
+    }
+
+</style>
+<body>
+    <div class="goods">
+        <h1><center>iPhone商城</center></h1>
+        <!-- 定义一个大盒子box用来装循环的div商品 -->
+        <div class="box">
+            <!-- 商品列表 -->
+            <!-- v-for表示循环 -->
+            <div v-for="sz in goods" class="list">
+                <img :src="sz.img" alt="" style="width: 200px;height: 200px;">
+                <p>名称：{{sz.name}}</p>
+                <p>内存：{{sz.nc}}</p>
+                <p>价格：{{sz.price}}</p>
+            </div>
+        </div>
+    </div>
+</body>
+<script>
+    var app=Vue.createApp({
+        data(){
+            return {
+                goods:[
+                      {
+                        img:'https://img10.360buyimg.com/n1/s450x450_jfs/t1/32790/40/20006/18656/63a5598cE198d3b50/1645c9835e0f4ccc.jpg',
+                        name:'iphone 14pro',
+                        nc:'128G',
+                        price:'￥7999'
+                    },
+                    {
+                        img:'https://img12.360buyimg.com/n1/s450x450_jfs/t1/10262/16/20740/22590/63a559e2Ea7699f3d/43bcf224f7de79bc.jpg',
+                        name:'iphone 14pro',
+                        nc:'256G',
+                        price:'￥8899'
+                    },
+                    {
+                        img:'https://img13.360buyimg.com/n1/s450x450_jfs/t1/215145/14/24575/20158/63a559caEfbd9859d/50fe9c3c5089f91a.jpg',
+                        name:'iphone 14pro max',
+                        nc:'1TB',
+                        price:'￥13499'
+                    }
+                ]
+
+            }
+        }
+    }).mount('.goods')
+</script>
+</html>
\ No newline at end of file
diff --git "a/\345\221\250\350\212\267\350\216\271/20230325-Apple Store2/iphone.html" "b/\345\221\250\350\212\267\350\216\271/20230325-Apple Store2/iphone.html"
new file mode 100644
index 0000000000000000000000000000000000000000..52226de3ba55ba5a9345ca138ed67ff8d56bc61a
--- /dev/null
+++ "b/\345\221\250\350\212\267\350\216\271/20230325-Apple Store2/iphone.html"	
@@ -0,0 +1,96 @@
+<!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">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <title>iPhone商城</title>
+</head>
+    <!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
+    <!-- #### 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    .goods{
+        width: 900px;
+        height: 600px;
+        /* background-color: cadetblue; */
+        margin:auto
+    }
+    .box{
+        width: 900px;
+        height: 500px;
+        /* background-color: blue; */
+        margin-top: 7px;
+        display: flex;
+        justify-content: space-around;
+    }
+    .list{
+        margin-top: 25px;
+    }
+
+</style>
+<body>
+    <div class="goods">
+        <h1><center>iPhone商城</center></h1>
+        <!-- 定义一个大盒子box用来装循环的div商品 -->
+        <div class="box">
+            <!-- 商品列表 -->
+            <!-- v-for表示循环 -->
+            <div v-for="sz in goods" class="list">
+                <!-- 如果sz.kc不等于100就显示商品，否则就不显示商品，因为当sz.kc=100时，库存就=0 -->
+                <div v-if="sz.kc!=100">
+                    <img :src="sz.img" alt="" style="width: 200px;height: 200px;">
+                    <p>名称：{{sz.name}}</p>
+                    <p>颜色：{{sz.color}}</p>
+                    <p>内存：{{sz.nc}}</p>
+                    <p>价格：{{sz.price}}</p>
+                    <p>库存：{{100-sz.kc}}</p> <input type="text" v-model="sz.kc">
+                </div>
+                <!-- 否则就显示商品已售罄 -->
+                <div v-else>
+                    <h2>{{sz.name}} {{sz.color}} 已售罄</h2>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script>
+    var app=Vue.createApp({
+        data(){
+            return {
+                goods:[
+                      {
+                        img:'https://img10.360buyimg.com/n1/s450x450_jfs/t1/32790/40/20006/18656/63a5598cE198d3b50/1645c9835e0f4ccc.jpg',
+                        name:'iphone 14pro',
+                        color:'深空灰',
+                        nc:'128G',
+                        price:'￥7999',
+                        kc:'0'
+                    },
+                    {
+                        img:'https://img12.360buyimg.com/n1/s450x450_jfs/t1/10262/16/20740/22590/63a559e2Ea7699f3d/43bcf224f7de79bc.jpg',
+                        name:'iphone 14pro',
+                        color:'土豪金',
+                        nc:'256G',
+                        price:'￥8899',
+                        kc:'0'
+                    },
+                    {
+                        img:'https://img13.360buyimg.com/n1/s450x450_jfs/t1/215145/14/24575/20158/63a559caEfbd9859d/50fe9c3c5089f91a.jpg',
+                        name:'iphone 14pro max',
+                        color:'绅士银',
+                        nc:'1TB',
+                        price:'￥13499',
+                        kc:'0'
+                    }
+                ]
+
+            }
+        }
+    }).mount('.goods')
+</script>
+</html>
\ No newline at end of file
diff --git "a/\345\221\250\350\212\267\350\216\271/20230327-Apple Store3/iphone.html" "b/\345\221\250\350\212\267\350\216\271/20230327-Apple Store3/iphone.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c2f88303949b4248b5b7723074d9dd3f5552aaff
--- /dev/null
+++ "b/\345\221\250\350\212\267\350\216\271/20230327-Apple Store3/iphone.html"	
@@ -0,0 +1,126 @@
+<!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">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <title>Apple Store</title>
+</head>
+    <!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
+    <!-- #### 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+    <!-- 作业： 上一节课基础上，添加  新增 和 删除的按钮,点新增 会加入对应的一条数据，点删除删除对应的商品 -->
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    .goods{
+        width: 900px;
+        height: 600px;
+        /* background-color: cadetblue; */
+        margin:auto
+    }
+    .box{
+        width: 900px;
+        height: 500px;
+        /* background-color: blue; */
+        display: flex;
+        justify-content: space-around;
+    }
+    .list{
+        margin-top: 25px;
+    }
+    input{
+        width: 100px;
+    }
+    .an{
+        margin-top: 7px;
+    }
+</style>
+<body>
+    <div class="goods">
+        <h1><center>Apple Store</center></h1>
+        <!-- 定义一个大盒子box用来装循环的div商品 -->
+        <div class="box">
+            <!-- 商品列表 -->
+            <!-- v-for表示循环 -->
+            <div v-for="(sz,index) in goods" class="list">
+                <!-- 如果sz.kc不等于100就显示商品，否则就不显示商品，因为当sz.kc=100时，库存就=0 -->
+                <div v-if="sz.kc!=100">
+                    <img :src="sz.img" alt="" style="width: 200px;height: 200px;">
+                    <p>名称：{{sz.name}}</p>
+                    <p>颜色：{{sz.color}}</p>
+                    <p>内存：{{sz.nc}}</p>
+                    <p>价格：{{sz.price}}</p>
+                    <p>库存：{{100-sz.kc}}</p> 
+                    <div class="an">
+                        <button @click="add(index)">新增</button>
+                        &nbsp;&nbsp;
+                        <input type="text" v-model="sz.kc">
+                        &nbsp;&nbsp;
+                        <button @click="del(index)">删除</button>
+                    </div>
+
+                </div>
+                <!-- 否则就显示商品已售罄 -->
+                <div v-else>
+                    <h2>{{sz.name}} {{sz.color}} 已售罄</h2>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script>
+    var app=Vue.createApp({
+        data(){
+            return {
+                goods:[
+                      {
+                        img:'https://img10.360buyimg.com/n1/s450x450_jfs/t1/32790/40/20006/18656/63a5598cE198d3b50/1645c9835e0f4ccc.jpg',
+                        name:'iphone 14pro',
+                        color:'深空灰',
+                        nc:'128G',
+                        price:'￥7999',
+                        kc:'0'
+                    },
+                    {
+                        img:'https://img12.360buyimg.com/n1/s450x450_jfs/t1/10262/16/20740/22590/63a559e2Ea7699f3d/43bcf224f7de79bc.jpg',
+                        name:'iphone 14pro',
+                        color:'土豪金',
+                        nc:'256G',
+                        price:'￥8899',
+                        kc:'0'
+                    },
+                    {
+                        img:'https://img13.360buyimg.com/n1/s450x450_jfs/t1/215145/14/24575/20158/63a559caEfbd9859d/50fe9c3c5089f91a.jpg',
+                        name:'iphone 14pro max',
+                        color:'绅士银',
+                        nc:'1TB',
+                        price:'￥13499',
+                        kc:'0'
+                    }
+                ]
+
+            }
+        },
+        methods:{
+            // 点击哪个商品就会新增哪个商品
+            add:function(index){
+                const xz={
+                    img:this.goods[index].img,
+                    name:this.goods[index].name,
+                    color:this.goods[index].color,
+                    nc:this.goods[index].nc,
+                    price:this.goods[index].price,
+                    kc:this.goods[index].kc,
+                }
+                this.goods.push(xz);
+            },
+            del:function(index){
+                this.goods.splice(index,1)
+            }
+        }
+    }).mount('.goods')
+</script>
+</html>
\ No newline at end of file
diff --git "a/\345\221\250\350\212\267\350\216\271/20230330-Apple Store4/iphone.html" "b/\345\221\250\350\212\267\350\216\271/20230330-Apple Store4/iphone.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dbd624f64ce1e7ecad83ef52dca49e834f2704ba
--- /dev/null
+++ "b/\345\221\250\350\212\267\350\216\271/20230330-Apple Store4/iphone.html"	
@@ -0,0 +1,164 @@
+<!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">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <title>Apple Store</title>
+</head>
+    <!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
+    <!-- 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+    <!-- 作业： 上一节课基础上，添加  新增 和 删除的按钮,点新增 会加入对应的一条数据，点删除删除对应的商品 -->
+    <!-- 作业：在上一次基础上，加入监听器和计算属性，用计算属性来计算购买的总价，用监听器来控制购买的数量，如果超出了总数给出提示,不能再加数量了. -->
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    .goods{
+        width: 900px;
+        height: 600px;
+        /* background-color: cadetblue; */
+        margin:auto
+    }
+    .box{
+        width: 900px;
+        height: 500px;
+        /* background-color: blue; */
+        display: flex;
+        justify-content: space-around;
+    }
+    .list{
+        margin-top: 25px;
+    }
+    input{
+        width: 100px;
+    }
+    .an{
+        margin-top: 7px;
+    }
+</style>
+<body>
+    <div class="goods">
+        <h1><center>Apple Store</center></h1>
+        <!-- 定义一个大盒子box用来装循环的div商品 -->
+        <div class="box">
+            <!-- 商品列表 -->
+            <!-- v-for表示循环 -->
+            <div v-for="(sz,index) in goods" class="list">
+                <div v-if="sz.kc=100">
+                    <img :src="sz.img" alt="" style="width: 200px;height: 200px;">
+                    <p>名称：{{sz.name}}</p>
+                    <p>颜色：{{sz.color}}</p>
+                    <p>内存：{{sz.nc}}</p>
+                    <p>价格：{{sz.price}}</p>
+                    <p>库存：{{100-sz.buynum}}</p> 
+                    <p>总价：￥{{sz.buynum*sz.price}} 元</p>
+                    <div class="an">
+                        <button @click="add(index)">新增</button>
+                        &nbsp;&nbsp;
+                        <input type="text" v-model="sz.buynum">
+                        &nbsp;&nbsp;
+                        <button @click="del(index)">删除</button>
+                    </div>
+
+                </div>
+                <!-- 否则就显示商品已售罄 -->
+                <div v-else>
+                    <h2>{{sz.name}} {{sz.color}} 已售罄</h2>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
+<script>
+    var app=Vue.createApp({
+        data(){
+            return {
+                goods:[
+                      {
+                        img:'https://img10.360buyimg.com/n1/s450x450_jfs/t1/32790/40/20006/18656/63a5598cE198d3b50/1645c9835e0f4ccc.jpg',
+                        name:'iphone 14pro',
+                        color:'深空灰',
+                        nc:'128G',
+                        price:7999,
+                        buynum:0,
+                        kc:100
+                    },
+                    {
+                        img:'https://img12.360buyimg.com/n1/s450x450_jfs/t1/10262/16/20740/22590/63a559e2Ea7699f3d/43bcf224f7de79bc.jpg',
+                        name:'iphone 14pro',
+                        color:'土豪金',
+                        nc:'256G',
+                        price:8899,
+                        buynum:0,
+                        kc:100
+                    },
+                    {
+                        img:'https://img13.360buyimg.com/n1/s450x450_jfs/t1/215145/14/24575/20158/63a559caEfbd9859d/50fe9c3c5089f91a.jpg',
+                        name:'iphone 14pro max',
+                        color:'绅士银',
+                        nc:'1TB',
+                        price:13499,
+                        buynum:0,
+                        kc:100
+                    }
+                ]
+
+            }
+        },
+        methods:{
+            // 点击哪个商品就会新增哪个商品
+            add:function(index){
+                const xz={
+                    img:this.goods[index].img,
+                    name:this.goods[index].name,
+                    color:this.goods[index].color,
+                    nc:this.goods[index].nc,
+                    price:this.goods[index].price,
+                    buynum:this.goods[index].buynum,
+                }
+                this.goods.push(xz);
+            },
+            del:function(index){
+                this.goods.splice(index,1)
+            }
+        },
+        // 计算属性：将想要缓存的结果进行缓存，而这个缓存到的值就是odlValus，用来给下面的监听使用
+        computed:{
+            num0(){
+                 return this.goods[0].buynum;
+            },
+            num1(){
+                 return this.goods[1].buynum;
+            },
+            num2(){
+                 return this.goods[2].buynum;
+            },           
+        },
+        // 监听数量：当新值与计算属性里缓存到的odlValus旧值不一样时，就会触发方法
+        // 注意：计算属性里的方法名与监听里的方法名必须一致
+        watch:{
+            num0:function(newValue,odlValus){
+                if(newValue > this.goods[0].kc){
+                    alert('库存不足，超出总数')
+                }
+            },
+            num1:function(newValue,odlValus){
+                if(newValue > this.goods[1].kc){
+                    alert('库存不足，超出总数')
+                }
+            }, 
+            num2:function(newValue,odlValus){
+                if(newValue > this.goods[2].kc){
+                    alert('库存不足，超出总数')
+                }
+            },
+
+
+        }
+    }).mount('.goods')
+</script>
+</html>
\ No newline at end of file
