From 018a5f14d9d112ed5f3f55245650a6ed6bfd3e6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=82=9C?=
 <8088878+li-wei-ly@user.noreply.gitee.com>
Date: Sun, 9 Oct 2022 07:17:17 +0000
Subject: [PATCH 1/5] =?UTF-8?q?=E6=96=B0=E5=BB=BA=2035=E6=9D=8E=E7=82=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../35\346\235\216\347\202\234/.keep"                             | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 "\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/.keep"
diff --git "a/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/.keep" "b/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/.keep"
new file mode 100644
index 0000000..e69de29
-- 
Gitee


From d6808583f6b2e0f4eaa5c5012a90868ce9301b34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=82=9C?=
 <8088878+li-wei-ly@user.noreply.gitee.com>
Date: Sun, 9 Oct 2022 07:19:24 +0000
Subject: [PATCH 2/5] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李炜 <8088878+li-wei-ly@user.noreply.gitee.com>
---
 .../35\346\235\216\347\202\234/1.html"        | 63 +++++++++++++++++++
 .../35\346\235\216\347\202\234/2.html"        | 35 +++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 "\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/1.html"
 create mode 100644 "\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/2.html"

diff --git "a/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/1.html" "b/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/1.html"
new file mode 100644
index 0000000..a3c438d
--- /dev/null
+++ "b/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/1.html"
@@ -0,0 +1,63 @@
+<!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/dist/vue.js"></script>
+</head>
+<body>
+    <div id="root">
+        <p>商品:<input type="text" v-model="msg1"></p>
+        <p>数量:<input type="text" v-model="msg2"></p>
+        <p>价格:<input type="text" v-model="msg3"></p>
+        <button v-on:click="add">添加到购物车</button>
+        <ul><li v-for="item in num">{{item.s}}的数量是{{item.n}},单计是{{item.price}},小计:{{item.xiaoji}}</li></ul>
+        <span v-model="total">总计:{{totalPrice}}</span>
+    
+    </div>
+
+<script>
+    var v = new Vue({
+        el:"#root",
+        data:{
+            msg1:"",
+            msg2:"",
+            msg3:"",
+            num:[],
+            xiao:"",
+        },
+        methods:{
+            add(){
+                this.xiao = this.msg2 * this.msg3;
+                this.num.push({s:this.msg1,n:this.msg2,price:this.msg3,xiaoji:this.xiao});
+        
+                this.msg1="";
+                this.msg2="";
+                this.msg3="";
+            }            
+        },
+
+        computed:{
+            totalPrice(){
+                var totalPrice = 0;
+                var totalNum = 0;
+                for (const key in this.num) {
+                    totalPrice += this.num[key].price * this.num[key].n;
+                    totalNum = totalNum + this.num[key].n*1;
+                }
+                return "总数---" + totalNum +  "总价---" + totalPrice + "元"
+            },
+
+        
+        }
+
+
+
+    })
+</script>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/2.html" "b/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/2.html"
new file mode 100644
index 0000000..a56c18d
--- /dev/null
+++ "b/\347\254\254\344\270\211\346\254\241\344\275\234\344\270\232/35\346\235\216\347\202\234/2.html"
@@ -0,0 +1,35 @@
+<!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/dist/vue.js"></script>
+</head>
+<body>
+
+    <div id="root">
+        <input type="text" v-model="msg">
+        <p>{{msg | a}}</p>
+    </div>
+
+    <script>
+        Vue.filter("a" ,function(value){
+            return value.split(" ").join("")
+        })
+        new Vue({
+
+            
+            el:"#root",
+            data:{
+                msg:"1 1    1   1",
+
+            }
+        })
+
+
+    </script>
+    
+</body>
+</html>
\ No newline at end of file
-- 
Gitee


From 43d90e4d452ab884d834ff02bf4b99c76f8852e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=82=9C?=
 <8088878+li-wei-ly@user.noreply.gitee.com>
Date: Sun, 9 Oct 2022 07:24:12 +0000
Subject: [PATCH 3/5] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李炜 <8088878+li-wei-ly@user.noreply.gitee.com>
---
 .../35 \346\235\216\347\202\234/2.html"       | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 "\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/35 \346\235\216\347\202\234/2.html"

diff --git "a/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/35 \346\235\216\347\202\234/2.html" "b/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/35 \346\235\216\347\202\234/2.html"
new file mode 100644
index 0000000..c744da7
--- /dev/null
+++ "b/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/35 \346\235\216\347\202\234/2.html"	
@@ -0,0 +1,114 @@
+<!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/dist/vue.js"></script>
+    <style>
+        table{
+            border: 1px solid gainsboro;
+        }
+
+        th,td{
+            border: 1px solid gainsboro;
+            padding: 8px 16px;
+        }
+
+        input{
+            width: 50px;
+        }
+    </style>
+
+
+</head>
+<body>
+    <div id="root">
+        
+        <div v-if="goods.length">
+            <input type="button" @click="openAdd" value="添加">
+            <table>
+                <tr>
+                    <th>id</th>
+                    <th>商品名称</th>
+                    <th>商品价格</th>
+                    <th>商品数量</th>
+                    <th>操作</th>
+                </tr>
+                
+                <tr v-for="item,index in goods">
+                    <td>{{index + 1}}</td>
+                    <td>{{item.name}}</td>
+                    <td>{{item.price}}</td>
+                    <td>
+                        <button @click="handleReduce(index)" :disabled="item.num ===1">-</button>
+                        {{item.num}}
+                        <button @click="handleAdd(index)">+</button>
+                    </td>
+                    <td>
+                        <button @click="reduce(index)">移除</button>
+                    </td>
+                </tr>
+
+                <tr v-show="ok" >
+                    <td>{{id}}</td>
+                    <td><input type="text" v-model="msg1"></td>
+                    <td><input type="text" v-model="msg2"></td>
+                    <td><input type="text" v-model="msg3"></td>
+                    <td>
+                        <button @click="add">确认</button>
+                    </td>
+                </tr>
+                
+            </table>
+            <span>总计:{{totalPrice}}</span>
+    
+            </div>
+            <div v-else>购物车为空</div>
+    </div>
+
+    <script>
+        var v = new Vue({
+            el:"#root",
+            data:{
+                id:"2",
+                msg1:"",
+                msg2:"",
+                msg3:"",
+                ok:false,
+                goods:[{id:1,name:"牙刷",price:10,num:1,}],
+            },
+            methods:{
+                openAdd(){
+                    this.ok = !this.ok;
+                },
+                add(){
+                    this.goods.push({name:this.msg1,price:this.msg2,num:this.msg3});
+                    this.id++;
+                },
+                reduce(index){
+                    this.goods.splice(index,1);
+                },
+                handleAdd(index){
+                    this.goods[index].num++;
+                },
+                handleReduce(index){
+                    this.goods[index].num--;
+                }
+            },
+            computed:{
+                totalPrice(){
+                var totalPrice = 0;
+                for (const key in this.goods) {
+                    totalPrice += this.goods[key].price * this.goods[key].num;
+                }
+                return "总价---" + totalPrice + "元"
+            },
+
+            }
+ 
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee


From 2c46cd5c9b98b96bacf0d11ac4c6f3961968348d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=82=9C?=
 <8088878+li-wei-ly@user.noreply.gitee.com>
Date: Sun, 9 Oct 2022 07:27:02 +0000
Subject: [PATCH 4/5] =?UTF-8?q?=E6=96=B0=E5=BB=BA=2035=E6=9D=8E=E7=82=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../35\346\235\216\347\202\234/.keep"                             | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 "\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/.keep"

diff --git "a/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/.keep" "b/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/.keep"
new file mode 100644
index 0000000..e69de29
-- 
Gitee


From 077a10bb9296e50586754ed09ebde31c7117fa65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=82=9C?=
 <8088878+li-wei-ly@user.noreply.gitee.com>
Date: Sun, 9 Oct 2022 07:27:37 +0000
Subject: [PATCH 5/5] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李炜 <8088878+li-wei-ly@user.noreply.gitee.com>
---
 .../35\346\235\216\347\202\234/1.html"        |  40 ++++++
 .../35\346\235\216\347\202\234/2.html"        |  80 ++++++++++++
 .../35\346\235\216\347\202\234/3.html"        | 114 ++++++++++++++++++
 3 files changed, 234 insertions(+)
 create mode 100644 "\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/1.html"
 create mode 100644 "\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/2.html"
 create mode 100644 "\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/3.html"

diff --git "a/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/1.html" "b/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/1.html"
new file mode 100644
index 0000000..d867255
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/1.html"
@@ -0,0 +1,40 @@
+<!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/dist/vue.js"></script>
+</head>
+<body>
+    <div id="root">
+        num:<span v-text="num"></span>,<br>
+        v-big num:<span v-big="num"></span><br>
+        <button @click="add">点我+1</button>
+
+    </div>
+    <script>
+        Vue.config.productionTip=false;
+        var root=new Vue(
+            {
+                el:'#root',
+                data:{
+                    num:21
+                },
+                methods: {
+                    add(){
+                        this.num++
+                    }
+                },
+                directives:{
+                    big(el,binding){
+                        el.innerText = binding.value*10
+                    }
+                }
+            }
+        )
+    </script>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/2.html" "b/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/2.html"
new file mode 100644
index 0000000..5dfdb37
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/2.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">
+    <title>Document</title>
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <div id="root">
+        姓名：<input type="text" v-model="name"><br>
+
+        性别：<input type="radio" v-model="gender" value="male" id="male">
+        <label for="male">男</label>
+        <input type="radio" v-model="gender" value="female">
+        <label for="female">女</label>
+        <br>
+
+        爱好：<label :for="item" v-for="(item, index) in hobbies" :key="index">
+        <input type="checkbox" v-model="myhobbies" :id="item" :value="item" >{{item}}
+        </label>
+        <br>
+
+        职业：<select v-model="profession">
+            <option value="boss">老板</option>
+            <option value="engineer">软件工程师</option>
+            <option value="lawyer">律师</option>
+            <option value="teacher">教师</option>
+        </select>
+        <br>
+
+        个人简介：<textarea v-model="te" cols="30" rows="10"></textarea>
+        <br>
+
+        年龄：<input type="text" v-model="age">
+        <br>
+
+        城市：<select v-model="city" >
+            <option value="">请选择城市</option>
+            <option value="厦门">厦门</option>
+            <option value="龙岩">龙岩</option>
+            <option value="漳州">漳州</option>
+            <option value="福州">福州</option>
+        </select>
+        <br>
+
+        <input type="checkbox" v-model="isagree" id="agree">
+        <label for="agree">同意协议</label>
+        <button :disabled="isagree==false">提交</button>
+
+
+        <p>您的个人信息是：</p>
+        <p>用户名-{{name}} 年龄-{{age}} 性别-{{gender}} 爱好-{{myhobbies}} 职业-{{profession}}
+            自我介绍-{{te}} 城市-{{city}}
+        </p>
+
+    </div>
+
+
+    <script>
+        new Vue({
+            el:"#root",
+            data:{
+                isagree:false,
+                city:"",
+                age:"",
+                te:"哈哈哈",
+                profession:"",
+                myhobbies:[],
+                hobbies:["篮球","唱歌","写代码"],
+                name:"",
+                gender:"",
+            }
+        })
+    </script>
+
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/3.html" "b/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/3.html"
new file mode 100644
index 0000000..c744da7
--- /dev/null
+++ "b/\347\254\254\344\272\224\346\254\241\350\265\260\344\271\237/35\346\235\216\347\202\234/3.html"
@@ -0,0 +1,114 @@
+<!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/dist/vue.js"></script>
+    <style>
+        table{
+            border: 1px solid gainsboro;
+        }
+
+        th,td{
+            border: 1px solid gainsboro;
+            padding: 8px 16px;
+        }
+
+        input{
+            width: 50px;
+        }
+    </style>
+
+
+</head>
+<body>
+    <div id="root">
+        
+        <div v-if="goods.length">
+            <input type="button" @click="openAdd" value="添加">
+            <table>
+                <tr>
+                    <th>id</th>
+                    <th>商品名称</th>
+                    <th>商品价格</th>
+                    <th>商品数量</th>
+                    <th>操作</th>
+                </tr>
+                
+                <tr v-for="item,index in goods">
+                    <td>{{index + 1}}</td>
+                    <td>{{item.name}}</td>
+                    <td>{{item.price}}</td>
+                    <td>
+                        <button @click="handleReduce(index)" :disabled="item.num ===1">-</button>
+                        {{item.num}}
+                        <button @click="handleAdd(index)">+</button>
+                    </td>
+                    <td>
+                        <button @click="reduce(index)">移除</button>
+                    </td>
+                </tr>
+
+                <tr v-show="ok" >
+                    <td>{{id}}</td>
+                    <td><input type="text" v-model="msg1"></td>
+                    <td><input type="text" v-model="msg2"></td>
+                    <td><input type="text" v-model="msg3"></td>
+                    <td>
+                        <button @click="add">确认</button>
+                    </td>
+                </tr>
+                
+            </table>
+            <span>总计:{{totalPrice}}</span>
+    
+            </div>
+            <div v-else>购物车为空</div>
+    </div>
+
+    <script>
+        var v = new Vue({
+            el:"#root",
+            data:{
+                id:"2",
+                msg1:"",
+                msg2:"",
+                msg3:"",
+                ok:false,
+                goods:[{id:1,name:"牙刷",price:10,num:1,}],
+            },
+            methods:{
+                openAdd(){
+                    this.ok = !this.ok;
+                },
+                add(){
+                    this.goods.push({name:this.msg1,price:this.msg2,num:this.msg3});
+                    this.id++;
+                },
+                reduce(index){
+                    this.goods.splice(index,1);
+                },
+                handleAdd(index){
+                    this.goods[index].num++;
+                },
+                handleReduce(index){
+                    this.goods[index].num--;
+                }
+            },
+            computed:{
+                totalPrice(){
+                var totalPrice = 0;
+                for (const key in this.goods) {
+                    totalPrice += this.goods[key].price * this.goods[key].num;
+                }
+                return "总价---" + totalPrice + "元"
+            },
+
+            }
+ 
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee


id	商品名称	商品价格	商品数量	操作
{{index + 1}}	{{item.name}}	{{item.price}}	+ + {{item.num}} + +	+ +
{{id}}				+ +