From 6871e0b3b42dcbc2afeecef4ad08390aad6c587a Mon Sep 17 00:00:00 2001
From: li <9843526+pjjm__21@user.noreply.gitee.com>
Date: Thu, 6 Oct 2022 04:58:14 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=E6=96=B0=E5=BB=BA=2020210340826=E5=BD=AD?=
 =?UTF-8?q?=E4=BD=B3=E9=9D=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20210340826\345\275\255\344\275\263\351\235\231/.keep"        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 "\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/.keep"
diff --git "a/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/.keep" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/.keep"
new file mode 100644
index 0000000..e69de29
-- 
Gitee


From 779df8e32ad4f3288ce130fd3820b34ab64fc1c0 Mon Sep 17 00:00:00 2001
From: li <9843526+pjjm__21@user.noreply.gitee.com>
Date: Thu, 6 Oct 2022 04:58:43 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=E7=AC=AC=E4=BA=94=E6=AC=A1=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: li <9843526+pjjm__21@user.noreply.gitee.com>
---
 .../demo13.html"                              |  39 +++++
 .../demo14.html"                              | 154 ++++++++++++++++++
 2 files changed, 193 insertions(+)
 create mode 100644 "\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo13.html"
 create mode 100644 "\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo14.html"

diff --git "a/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo13.html" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo13.html"
new file mode 100644
index 0000000..c8bd591
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo13.html"
@@ -0,0 +1,39 @@
+<!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>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        ￥<input v-model="china" type="text"><br> $ <input v-model="america" type="text"><br> {{china+'人民币='+america+'美元'}}
+    </div>
+</body>
+<script>
+    var vue = new Vue({
+        el: '#app',
+        data() {
+            return {
+                china: '',
+                america: '',
+
+            }
+        },
+        watch: {
+            china: function(newValue, oldValue) {
+                this.america = newValue * 0.1427
+
+            },
+            america: function(newValue, oldValue) {
+                this.china = newValue / 0.1427
+            }
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo14.html" "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo14.html"
new file mode 100644
index 0000000..a6cd8a1
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo14.html"
@@ -0,0 +1,154 @@
+<!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>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.min.js"></script>
+    <style>
+        table {
+            border: 2px solid gray;
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        
+        th,
+        td {
+            border: 2px solid gray;
+            text-align: center;
+            padding: 10px 20px;
+        }
+        
+        input {
+            width: 80px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <button @click="addOne">添加</button>
+        <div v-if="goods.length>0">
+            <table>
+                <tr>
+                    <th>id</th>
+                    <th>商品名称</th>
+                    <th>商品价格</th>
+                    <th>商品数量</th>
+                    <th>操作</th>
+                </tr>
+                <tr v-for="item,index in goods" :key="item">
+                    <td>{{item.id}}</td>
+                    <td>{{item.name}}</td>
+                    <td>{{item.price}}</td>
+                    <td><button @click="subcount(index)" :disabled="goods[index].count<=1">-</button> {{item.count}}
+                        <button @click="addcount(index)">+</button>
+                    </td>
+                    <td><button @click="delOne(index)">移除</button></td>
+                </tr>
+                <tr v-if="add">
+                    <td><input v-model="id" type="text"></td>
+                    <td><input v-model="name" type="text"></td>
+                    <td><input v-model="price" type="text"></td>
+                    <td><input v-model="count" type="text"></td>
+                    <td><button @click="queding">确定</button></td>
+                </tr>
+            </table>
+            <h1>总价格：￥{{sumPrice}}</h1>
+        </div>
+        <div v-else>
+            <h1>购物车为空！！</h1>
+            <table v-if="add">
+                <tr>
+                    <th>id</th>
+                    <th>商品名称</th>
+                    <th>商品价格</th>
+                    <th>商品数量</th>
+                    <th>操作</th>
+                </tr>
+                <tr>
+                    <td><input v-model="id" type="text"></td>
+                    <td><input v-model="name" type="text"></td>
+                    <td><input v-model="price" type="text"></td>
+                    <td><input v-model="count" type="text"></td>
+                    <td><button @click="queding">确定</button></td>
+                </tr>
+            </table>
+        </div>
+
+    </div>
+</body>
+<script>
+    var vue = new Vue({
+        el: '#app',
+        data() {
+            return {
+                add: false,
+                id: '',
+                name: '',
+                price: '',
+                count: '',
+                goods: [{
+                    id: 1,
+                    name: "充电宝",
+                    price: 99.111,
+                    count: 1
+                }, {
+                    id: 2,
+                    name: "小风扇",
+                    price: 88.222,
+                    count: 1
+                }, {
+                    id: 3,
+                    name: "小音箱",
+                    price: 125.533,
+                    count: 1
+                }, {
+                    id: 4,
+                    name: "蓝牙耳机",
+                    price: 315.344,
+                    count: 1
+                }, ]
+            }
+        },
+        methods: {
+            addOne() {
+                this.add = true
+            },
+            delOne(index) {
+                this.goods.splice(index, 1)
+            },
+            queding() {
+                var Obj = {
+                    id: this.id,
+                    name: this.name,
+                    price: this.price,
+                    count: this.count
+                }
+                this.goods.push(Obj)
+                this.add = false
+            },
+            addcount(index) {
+                this.goods[index].count++
+            },
+            subcount(index) {
+                this.goods[index].count--
+            },
+
+        },
+        computed: {
+            sumPrice() {
+                var sum = 0;
+                for (var i = 0; i < this.goods.length; i++) {
+                    sum = sum + (this.goods[i].price * this.goods[i].count)
+                }
+                sum = sum.toFixed(2)
+                return sum;
+            }
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
-- 
Gitee


From 1c368e3fc6ea819fbf497d54b423c39f18af05c5 Mon Sep 17 00:00:00 2001
From: li <9843526+pjjm__21@user.noreply.gitee.com>
Date: Thu, 6 Oct 2022 04:59:30 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=E6=96=B0=E5=BB=BA=2020210340826=E5=BD=AD?=
 =?UTF-8?q?=E4=BD=B3=E9=9D=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20210340826\345\275\255\344\275\263\351\235\231/.keep"        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 "\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/.keep"

diff --git "a/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/.keep" "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/.keep"
new file mode 100644
index 0000000..e69de29
-- 
Gitee


From 1f5918405487c3d22f668ce0546d451ce118494f Mon Sep 17 00:00:00 2001
From: li <9843526+pjjm__21@user.noreply.gitee.com>
Date: Thu, 6 Oct 2022 04:59:56 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=E7=AC=AC=E5=85=AD=E6=AC=A1=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: li <9843526+pjjm__21@user.noreply.gitee.com>
---
 .../demo12.html"                              | 126 ++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 "\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo12.html"

diff --git "a/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo12.html" "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo12.html"
new file mode 100644
index 0000000..85ccd23
--- /dev/null
+++ "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340826\345\275\255\344\275\263\351\235\231/demo12.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">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.38/dist/vue.global.min.js"></script>
+</head>
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+    }
+    
+    #app {
+        display: flex;
+        justify-content: center;
+    }
+    
+    .left {
+        margin-left: 20px;
+    }
+</style>
+
+<body>
+    <div id="app">
+        <table>
+            <tr>
+                <td>姓名：</td>
+                <td>
+                    <input type="text" v-model="name">
+                </td>
+            </tr>
+            <tr>
+                <td>性别：</td>
+                <td>
+                    <label for="man">男
+                        <input type="radio" name="" id="man" value="man" v-model="sex">
+                    </label>
+                    <label for="woman">女
+                        <input type="radio" name="" id="woman" value="woman" v-model="sex">
+                    </label>
+                </td>
+            </tr>
+            <tr>
+                <td>爱好：</td>
+                <td>
+                    <label for="">
+
+                        <input type="checkbox" name="" id="" value="下棋" v-model="lover">
+                        下棋</label>
+                    <label for="">
+
+                        <input type="checkbox" name="" id="" value="篮球" v-model="lover">
+                        篮球</label>
+                </td>
+            </tr>
+            <tr>
+                <td>职业：</td>
+                <td>
+                    <select name="" id="" multiple v-model="pro">
+                        <option value="老板">老板</option>
+                        <option value="软件工程师">软件工程师</option>
+                        <option value="老师">老师</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td>个人简介：</td>
+                <td>
+                    <textarea name="" id="" v-model="info" cols="30" rows="10"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <td>城市：</td>
+                <td>
+                    <select name="" id="" v-model="city">
+                        <option value="北京">北京</option>
+                        <option value="厦门">厦门</option>
+                        <option value="福州">福州</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <label for="agr">
+                        <input type="checkbox" name="" v-model="isAgree" id="agr">
+                        同意
+                    </label>
+                    <button :disabled="!isAgree" @click="isShow='true'">提交</button>
+                </td>
+            </tr>
+        </table>
+        <div class="left">
+            <template v-if="isShow">
+                <h1>您的个人信息是：</h1>
+                <h2>用户名：{{name}}</h2>
+                <h2>性别：{{sex}}</h2>
+                <h2>爱好：{{lover}}</h2>
+                <h2>职业：{{pro}}</h2>
+                <h2>个人简介：{{info}}</h2>
+                <h2>城市：{{city}}</h2>
+            </template>
+        </div>
+    </div>
+</body>
+<script>
+    Vue.createApp({
+        data() {
+            return {
+                name: '',
+                sex: '',
+                lover: [],
+                pro: [],
+                info: '',
+                city: '',
+                isAgree: false,
+                isShow: false
+            }
+        }
+    }).mount('#app')
+</script>
+
+</html>
\ No newline at end of file
-- 
Gitee


姓名：	+ +
性别：	+ 男 + + + 女 + + +
爱好：	+ + + + 下棋 + + + + 篮球 +
职业：	+ +
个人简介：	+ +
城市：	+ +
+ + + 同意 + + +