diff --git "a/20230323-Vue\346\241\206\346\236\266/demo.html" "b/20230323-Vue\346\241\206\346\236\266/demo.html"
deleted file mode 100644
index 78e51becd7e83a491b15e3e7e757ef52019ab243..0000000000000000000000000000000000000000
--- "a/20230323-Vue\346\241\206\346\236\266/demo.html"
+++ /dev/null
@@ -1,99 +0,0 @@
-<!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>
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-    }
-    #goods {
-        width: 100vw;
-        height: 100vh;
-        display: flex;
-        flex-wrap: wrap;
-    }
-    h1{ 
-        width: 100vw;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        margin-top: 2vw;
-        background-color: brown;
-    }
-    #lists{
-        display: flex;
-        flex-direction: column;
-        margin: 2vw;
-        font-size: 26px;
-    }
-    #box{
-        width: 100vw;
-        height: 100vh;
-        display: flex;
-        justify-content: center;
-        margin-top: 2vw;
-    }
-    #box lists{
-        width: 33.3vw;
-        height: auto;
-    }
-</style>
-<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
-<body>
-    <!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
-    <div id="goods">
-        <h1>商品列表</h1>
-        <div id="box">
-        <div v-for="good in goods" id="lists">
-            <h2>名称：{{ good.name }}</h2>
-            <img v-bind:src="good.img" alt="" style="width: 500px;height: 400px;">
-            <p>描述：{{ good.describe }}</p>
-            <p>价格：￥{{good.price }}</p>
-        </div>
-    </div>
-    </div>
-</body>
-<script>
-    let app = Vue.createApp({
-        data: () => {
-            return {
-                goods: [
-                    {
-                        id: 1,
-                        name: '柴犬',
-                        describe: '像狗',
-                        price: '888',
-                        img: 'https://img0.baidu.com/it/u=4168664554,3249760368&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-
-                    },
-                    {
-                        id: 2,
-                        name: '萨摩耶',
-                        describe: '长得很像狗',
-                        price: '999',
-                        img: 'https://img0.baidu.com/it/u=3438843980,916394742&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=762',
-
-                    },
-                    {
-                        id: 3,
-                        name: '威尔士柯基犬',
-                        describe: '很狗',
-                        price: '898',
-                        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp437468049.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682154473&t=9f89afe9a3c36348f61ad7a45f577dbc',
-
-                    }
-                ]
-            }
-        }
-    })
-
-    app.mount('#goods');
-</script>
-
-</html>
\ No newline at end of file
diff --git "a/\351\231\210\350\223\223/.keep" "b/\351\231\210\350\223\223/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\351\231\210\350\223\223/goods-\345\242\236\345\212\240\343\200\201\345\210\240\351\231\244.html" "b/\351\231\210\350\223\223/goods-\345\242\236\345\212\240\343\200\201\345\210\240\351\231\244.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cbfbac2bc056bfd877c10e03831d11b5f557f8c9
--- /dev/null
+++ "b/\351\231\210\350\223\223/goods-\345\242\236\345\212\240\343\200\201\345\210\240\351\231\244.html"
@@ -0,0 +1,139 @@
+<!--上一节课基础上，添加  新增 和 删除的按钮,点新增 会加入对应的一条数据，点删除删除对应的商品 -->
+
+<!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>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            list-style: none;
+        }
+
+        #totall{
+            margin: auto;
+            width: 75%;
+            overflow: hidden;
+            background-color: antiquewhite;
+            display: flex;
+            flex-wrap:wrap;
+            justify-content:flex-start;
+            align-items:flex-start;
+        }
+       
+        .sp{
+            width: 200px;
+            margin: 25px;
+        }
+        .sp-text{
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .sp-describe{
+            font-weight: bold;
+        }
+        .sp img{
+            width: 200px;
+            height: 267px;
+        }
+        .number{
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="totall">
+       
+        <div  v-for="(item,i) in items" >
+                <div class="sp" v-if="(item.tonumber-item.number)>0"> 
+                <img v-bind:src="item.img" alt="">
+                <p class="sp-describe">{{item.describe}}</p>
+                <div class="sp-text">
+                    <span class="price">{{item.price}}</span>
+                    <span class="number">剩余数量：{{item.tonumber-item.number}}</span>
+                </div>
+                <input type="number" v-model="item.number">
+                    <button @click="add(i)">增加</button>
+                   <button @click="del(i)">删除</button>
+                
+            </div>
+        </div>
+          
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+<script>
+
+    Vue.createApp({
+        data:function (){
+            return {
+                items:[
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://gd4.alicdn.com/imgextra/i4/744523439/O1CN01TV5hLK1bH6ocRlmHb_!!744523439.jpg',
+                        describe:'现货红米Redmi AirDots 3 Pro 原神版降噪可莉真无线智能蓝牙耳机',
+                        tonumber:100,
+                        price:'￥379',
+                        number:0,
+                    },
+                    {
+                        img:'https://img.alicdn.com/imgextra/i1/134348404/O1CN01MBJes52Bx5LnhOrkY_!!134348404.jpg',
+                        describe:'朱迪尼克森女部落原创牛仔外套立体装饰春季新款情侣装宽松上衣',
+                        tonumber:100,
+                        price:'￥288',
+                        number:0,
+                    },
+                    {
+                        img:'https://img.alicdn.com/imgextra/i4/134348404/O1CN01MnEmBP2Bx5HrTHrJ3_!!134348404.jpg_400x400.jpg',
+                        describe:'原创森女部落国风旗袍领上衣炸街设计感新中式两件套浮雕高腰半裙',
+                        tonumber:'100',
+                        price:'￥138',
+                        number:0,
+                    },
+                    {
+                        img:'https://gw.alicdn.com/imgextra/i3/2212148998091/O1CN01fLerQM29djO74mco4_!!2212148998091.jpg_Q75.jpg_.webp',
+                        describe:'Fanci范琦银饰 莫比乌斯 恋爱频率情侣对戒戒指情侣戒指素圈戒指',
+                        price:'￥199',
+                        tonumber:100,
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        price:'￥275',
+                        tonumber:100,
+                        number:0,
+                    }
+                ]
+            }
+
+        },
+        methods:{
+            handInput:function(e){
+                this.number = e.targry.value
+            },
+            add(i){
+                
+                console.log(this.items[i]);
+                this.items.push(this.items[i]);
+            },
+            del(i){
+                //console.log(this.items[i]);
+                this.items.splice(i,1)
+            }
+        }
+    }).mount("#totall");
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\350\223\223/goods-\350\256\241\347\256\227\350\264\255\344\271\260\345\225\206\345\223\201\347\232\204\346\200\273\351\207\221\351\242\235.html" "b/\351\231\210\350\223\223/goods-\350\256\241\347\256\227\350\264\255\344\271\260\345\225\206\345\223\201\347\232\204\346\200\273\351\207\221\351\242\235.html"
new file mode 100644
index 0000000000000000000000000000000000000000..66efd00d7057db9ef2964eaa57ccb3ee0b25a56f
--- /dev/null
+++ "b/\351\231\210\350\223\223/goods-\350\256\241\347\256\227\350\264\255\344\271\260\345\225\206\345\223\201\347\232\204\346\200\273\351\207\221\351\242\235.html"
@@ -0,0 +1,166 @@
+<!-- 作业：在上一次基础上，加入监听器和计算属性，用计算属性来计算购买的总价，用监听器来控制购买的数量，如果超出了总数给出提示,不能再加数量了. -->
+
+<!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>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            list-style: none;
+        }
+
+        #totall{
+            margin: auto;
+            width: 75%;
+            overflow: hidden;
+            background-color: antiquewhite;
+            display: flex;
+            flex-wrap:wrap;
+            justify-content:flex-start;
+            align-items:flex-start;
+        }
+       
+        .sp{
+            width: 200px;
+            margin: 25px;
+        }
+        .sp-text{
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .sp-describe{
+            font-weight: bold;
+        }
+        .sp img{
+            width: 200px;
+            height: 267px;
+        }
+        .number{
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="totall">
+       
+        <div  v-for="(item,i) in items" >
+            
+                <div class="sp"> 
+                <!-- <div class="sp" v-if="(item.tonumber-item.number)>0">  -->
+                <img v-bind:src="item.img" alt="">
+                <p class="sp-describe">{{item.describe}}</p>
+                <div class="sp-text">
+                    <span class="price">￥{{item.price}}</span>
+                    <span class="number">剩余数量：{{item.tonumber-item.number}}</span>
+                </div>
+                <input type="number" v-model="item.number" v-on:click="handler(i)">
+                    <button @click="add(i)">增加</button>
+                   <button @click="del(i)">删除</button>
+                   <button @click="money(i)">购买</button>
+                   
+            </div>
+        </div>
+        <p></p>
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+<script>
+
+    Vue.createApp({
+        data:function (){
+            return {
+                items:[
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'275',
+                        number:0,
+                    },
+                    {
+                        img:'https://gd4.alicdn.com/imgextra/i4/744523439/O1CN01TV5hLK1bH6ocRlmHb_!!744523439.jpg',
+                        describe:'现货红米Redmi AirDots 3 Pro 原神版降噪可莉真无线智能蓝牙耳机',
+                        tonumber:100,
+                        price:'379',
+                        number:0,
+                    },
+                    {
+                        img:'https://img.alicdn.com/imgextra/i1/134348404/O1CN01MBJes52Bx5LnhOrkY_!!134348404.jpg',
+                        describe:'朱迪尼克森女部落原创牛仔外套立体装饰春季新款情侣装宽松上衣',
+                        tonumber:100,
+                        price:'288',
+                        number:0,
+                    },
+                    {
+                        img:'https://img.alicdn.com/imgextra/i4/134348404/O1CN01MnEmBP2Bx5HrTHrJ3_!!134348404.jpg_400x400.jpg',
+                        describe:'原创森女部落国风旗袍领上衣炸街设计感新中式两件套浮雕高腰半裙',
+                        tonumber:'100',
+                        price:'138',
+                        number:0,
+                    },
+                    {
+                        img:'https://gw.alicdn.com/imgextra/i3/2212148998091/O1CN01fLerQM29djO74mco4_!!2212148998091.jpg_Q75.jpg_.webp',
+                        describe:'Fanci范琦银饰 莫比乌斯 恋爱频率情侣对戒戒指情侣戒指素圈戒指',
+                        price:'199',
+                        tonumber:100,
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        price:'275',
+                        tonumber:100,
+                        number:0,
+                    }
+                ]
+            }
+
+        },
+        
+        methods:{
+            handInput:function(e){
+                this.number = e.targry.value
+            },
+            add(i){
+                
+                console.log(this.items[i]);
+                this.items.push(this.items[i]);
+            },
+            del(i){
+                //console.log(this.items[i]);
+                this.items.splice(i,1)
+            },
+            handler(i){
+                // console.log(this.items[i]);
+                    if (this.items[i].number<0) {
+                        this.items[i].number=0 ;
+                    }
+                    if(this.items[i].number>this.items[i].tonumber){
+                        alert("商品总数不超过库存");
+                        this.items[i].number=this.items[i].tonumber;
+
+                    }
+                
+            },
+            money(i){
+                goodsNumber = this.items[i].number;
+                goodsPrice = Number(this.items[i].price);
+                let goodMoney = 0 ,goodsMoney = 0;
+                for (let j = 1; j <=goodsNumber; j++) {
+                    goodMoney += goodsPrice;   
+                }
+                    goodsMoney += goodMoney;
+                console.log("购买商品总额为："+goodsMoney);
+            }
+        }
+        
+    }).mount("#totall");
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\350\223\223/shangp.html" "b/\351\231\210\350\223\223/shangp.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4cc0d291e0a45d57d0fc7c5d0c213017b86527dc
--- /dev/null
+++ "b/\351\231\210\350\223\223/shangp.html"
@@ -0,0 +1,58 @@
+<!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>
+    <!--作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据 -->
+    <div id="sp">
+        <table border="1" >
+            <tr>
+                <th>商品名称</th>
+                <th>商品价格</th>
+                <th>商品图片</th>
+            </tr>
+            <tr   v-for="(obj,index) in objs">
+                <td>{{obj.name}}</td>
+                <td>{{obj.price}}</td>
+                <td class="img">
+                          <img v-bind:src="obj.imgSrc" alt="" style="width: 40%;">
+                </td>
+                <!-- {{value}} -->
+            </tr>
+        </table>
+        <!-- <img src="https://img.alicdn.com/bao/uploaded/O1CN01HZ85o51NpY3H0L01Q_!!6000000001619-0-yinhe.jpg" alt=""> -->
+        
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+    Vue.createApp({
+        data:function(){
+            return{
+                objs:[
+                    {
+                        name:'耳机',
+                        price:'￥169.00',
+                        imgSrc:'https://img.alicdn.com/bao/uploaded/O1CN01HZ85o51NpY3H0L01Q_!!6000000001619-0-yinhe.jpg'
+                    },
+                    {
+                        name:'怪兽日记GSRJ官方2023年夏季新款创意小恶魔动感男女同款情侣',
+                        price:'￥139.90',
+                        imgSrc:'https://img.alicdn.com/bao/uploaded/O1CN01PO2c8c20VdqfpCxZC_!!6000000006855-0-yinhe.jpg'
+                    },
+                    {
+                        name:'ByYou 夏季气质高级感茶歇法式v领碎花连衣裙收腰显瘦泡泡袖长裙',
+                        price:'￥289.00',
+                        imgSrc:'https://img.alicdn.com/imgextra/i3/106247072/O1CN01Wg1z0Y2271mciYVsr_!!106247072.jpg'
+                    }
+                ]
+            }
+            
+        }
+    }).mount("#sp")
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\350\223\223/sp-list\351\201\215\345\216\206.html" "b/\351\231\210\350\223\223/sp-list\351\201\215\345\216\206.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1bfab45bc9a39ba339361022a41d80e477015f8a
--- /dev/null
+++ "b/\351\231\210\350\223\223/sp-list\351\201\215\345\216\206.html"
@@ -0,0 +1,120 @@
+<!-- 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+
+<!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>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            list-style: none;
+        }
+
+        #totall{
+            margin: auto;
+            width: 75%;
+            overflow: hidden;
+            background-color: antiquewhite;
+            display: flex;
+            flex-wrap:wrap;
+            justify-content:flex-start;
+            align-items:flex-start;
+        }
+       
+        .sp{
+            width: 200px;
+            margin: 25px;
+        }
+        .sp-text{
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .sp-describe{
+            font-weight: bold;
+        }
+        .number{
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="totall">
+        <div class="sp" v-for="i in items" >
+                <div v-if="(i.tonumber-i.number)>0"> 
+                <img v-bind:src="i.img" alt="" width="200">
+                <p class="sp-describe">{{i.describe}}</p>
+                <div class="sp-text">
+                    <span class="price">{{i.price}}</span>
+                    <span class="number">剩余数量：{{i.tonumber-i.number}}</span>
+                </div>
+                <input type="number" v-model="i.number">
+            </div>
+        </div>  
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+
+    Vue.createApp({
+        data:function (){
+            return {
+                items:[
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:'100',
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        price:'￥275',
+                        tonumber:100,
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        price:'￥275',
+                        tonumber:100,
+                        number:0,
+                    }
+                ]
+            }
+
+        },
+        methods:{
+            handInput:function(e){
+                this.number = e.targry.value
+            }
+        }
+    }).mount("#totall");
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\350\223\223/\346\250\241\346\235\277\345\274\225\347\224\250\345\222\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" "b/\351\231\210\350\223\223/\346\250\241\346\235\277\345\274\225\347\224\250\345\222\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c2b3a152e40da94b64969b559bb7d5e3560ade85
--- /dev/null
+++ "b/\351\231\210\350\223\223/\346\250\241\346\235\277\345\274\225\347\224\250\345\222\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
@@ -0,0 +1,66 @@
+<!-- 结合模板引用和自定义指令，实现表单的验证和错误样式的展示（标记红色，错误信息提示）,
+    再思考，怎么方便去获取表单的数据 -->
+<!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>
+<style>
+
+</style>
+<body>
+    <div class="form">
+        用户名:<input type="text" name="user" ref="getUserValue">
+        <br>
+        密码：<input type="password" name="password" id="" ref="getPasswordValue">
+        <br>
+        <p v-type='errcolor' v-show="login" >用户名或密码有误!</p>
+        <input type="submit" value="验证" @click="sub">
+       
+        <!-- <el-form>
+            <el-input v-model="" placeholder="输入用户邮箱">
+        </el-form> -->
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+    Vue.createApp({
+        data:function(){
+            return{
+                user:'1235',
+                password:'1234567',
+                errcolor:'red',
+                login:false,
+                font_size:'10px',
+            }    
+        },
+        methods:{
+            sub(){
+                // console.log(this.$refs.getUserValue.value);
+                // console.log(this.$refs.getPasswordValue.value);
+                // console.log(this.user);
+                // console.log(this.password);
+                let getPassword = this.$refs.getPasswordValue.value;
+                let getUser = this.$refs.getUserValue.value;
+                const a= true;
+                if(getUser != this.user || getPassword != this.password){
+                    console.log("用户名或密码有误");
+                   this.login = true;
+                }else{
+                    alert("验证成功！")
+                }
+            }
+        },
+        directives:{
+            type:function(el,binding){
+                let color = binding.value;
+                // console.log(color);
+                el.style.color = color;
+            },
+        }
+    }).mount("body")
+</script>
+</html>
\ No newline at end of file
