From 7f006b7f2e91a78fb820bc2a3ed8213407cc53b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E5=A8=9F?= <3113368166@qq.com>
Date: Thu, 6 Apr 2023 02:44:23 +0000
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E4=BD=9C=E4=B8=9A=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 谢娟 <3113368166@qq.com>
---
 vue-goods-zy/homework.html | 122 +++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 vue-goods-zy/homework.html
diff --git a/vue-goods-zy/homework.html b/vue-goods-zy/homework.html
new file mode 100644
index 0000000..f2ac977
--- /dev/null
+++ b/vue-goods-zy/homework.html
@@ -0,0 +1,122 @@
+<!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>
+    *{
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+    [v-cloak]{
+        display: none;
+    }
+    #app{
+        margin: 0 auto;
+        width: 600px;
+        height: 700px;
+    }
+    li{
+        float: left;
+    }
+    .div{
+        margin-top: 20px;
+     margin-left: 25px;
+        width: 250px;
+        height: 300px;
+    }
+    img{
+        width: 200px;
+        height: 200px;
+        margin-top: 10px;
+        margin-left: 25px;
+    }
+    .txt{
+        margin-left: 25px;
+    }
+    .price{
+        color: red;
+        margin-left: 25px;
+    }
+    .num{
+        float: right;
+        margin-right: 30px;
+    }
+</style>
+<body>
+<!-- 在原有作业基础上,使用list遍历商品,
+    每个商品初始为100个商品数量，
+    给个input输入，输入1 对应的商品数据要 -1
+    ，如果剩余数量为0，不展示 -->
+    <div id="app" v-cloak>
+        <ul>
+            <li v-for="i,index in list">
+                <div class="div" v-if="i.num>=0"> 
+                    <img v-bind:src="i.img" alt=""><br>
+                    <span class="txt">{{i.span}}</span><br>
+                    <span class="price">${{i.price}}</span>
+                    <span class="num">库存:{{i.num}}</span><br>
+                    <input type="text" class="type" v-model="i.type">
+                    <button @click="buy(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:function(){
+        return{
+            list:[
+                {
+                    img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2018%2F272%2F577%2F9781775272_1478421294.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683339462&t=4881c5592e39cded31e26f2a76838a21',
+                    span:'乐事薯片',
+                    price:8.8,
+                    num:100,
+                    status:'',
+                    type:null
+                },
+                {
+                    img:'https://img0.baidu.com/it/u=2569490734,1719447348&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
+                    span:'慕斯蛋糕',
+                    price:68.8,
+                    num:100,
+                    status:'',
+                    type:null  
+                },
+                {
+                    img:'https://img1.baidu.com/it/u=2237531816,2841199416&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+                    span:'星巴克',
+                    price:39.9,
+                    num:100,
+                    status:'',
+                    type:null     
+                },
+                {
+                    img:'https://5b0988e595225.cdn.sohucs.com/images/20181204/46966caeabb54e109aacfbcd81febeb2.jpeg',
+                    span:'红烧鱼',
+                    price:79.9,
+                    num:100,
+                    status:'',
+                    type:null   
+                }
+            ],
+        }
+    },
+    methods:{
+        buy:function(index){
+            this.list[index].num-=this.list[index].type
+        }
+    }
+}).mount('#app')
+</script>
+</html>
\ No newline at end of file
-- 
Gitee

