From d041b197e70084e64e03cb753c409e3223d21bae Mon Sep 17 00:00:00 2001
From: wenlin <507319093@qq.com>
Date: Sun, 5 Jul 2020 19:21:26 +0800
Subject: [PATCH] =?UTF-8?q?vue=E7=AC=AC=E4=BA=8C=E6=AC=A1=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Css/style.css"                            |   0
 .../bindClass.html"                           |  83 ++++++++
 .../bindStyle.html"                           |  27 +++
 .../text/index-1.html"                        |   0
 .../text/index-2.html"                        |   0
 .../text/index-3.html"                        |   0
 .../text/index-4.html"                        |   1 +
 .../text/index-5.html"                        |   0
 .../text/index-6.html"                        |   3 -
 .../vFor.html"                                |  62 ++++++
 .../vfor-1.html"                              |  96 +++++++++
 .../vif.html"                                 |  47 +++++
 ...5\347\275\256\346\214\207\344\273\244.txt" |   0
 .../Css/style.css"                            |  24 +++
 .../Js/index.js"                              | 166 +++++++++++++++
 .../index-shopp.html"                         | 101 +++------
 .../index.js"                                 |   0
 .../text/index-text1.html"                    | 132 ------------
 .../text/text1.html"                          | 193 ------------------
 19 files changed, 536 insertions(+), 399 deletions(-)
 rename "\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/style.css" => "\350\260\242\346\261\266\351\234\226/Css/style.css" (100%)
 create mode 100644 "\350\260\242\346\261\266\351\234\226/bindClass.html"
 create mode 100644 "\350\260\242\346\261\266\351\234\226/bindStyle.html"
 rename "\350\260\242\346\261\266\351\234\226/index-1.html" => "\350\260\242\346\261\266\351\234\226/text/index-1.html" (100%)
 rename "\350\260\242\346\261\266\351\234\226/index-2.html" => "\350\260\242\346\261\266\351\234\226/text/index-2.html" (100%)
 rename "\350\260\242\346\261\266\351\234\226/index-3.html" => "\350\260\242\346\261\266\351\234\226/text/index-3.html" (100%)
 rename "\350\260\242\346\261\266\351\234\226/index-4.html" => "\350\260\242\346\261\266\351\234\226/text/index-4.html" (99%)
 rename "\350\260\242\346\261\266\351\234\226/index-5.html" => "\350\260\242\346\261\266\351\234\226/text/index-5.html" (100%)
 rename "\350\260\242\346\261\266\351\234\226/index-6.html" => "\350\260\242\346\261\266\351\234\226/text/index-6.html" (98%)
 create mode 100644 "\350\260\242\346\261\266\351\234\226/vFor.html"
 create mode 100644 "\350\260\242\346\261\266\351\234\226/vfor-1.html"
 create mode 100644 "\350\260\242\346\261\266\351\234\226/vif.html"
 delete mode 100644 "\350\260\242\346\261\266\351\234\226/\347\254\254\344\272\224\347\253\240\345\206\205\347\275\256\346\214\207\344\273\244.txt"
 create mode 100644 "\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/Css/style.css"
 create mode 100644 "\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/Js/index.js"
 delete mode 100644 "\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/index.js"
 delete mode 100644 "\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/text/index-text1.html"
 delete mode 100644 "\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/text/text1.html"
diff --git "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/style.css" "b/\350\260\242\346\261\266\351\234\226/Css/style.css"
similarity index 100%
rename from "\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/style.css"
rename to "\350\260\242\346\261\266\351\234\226/Css/style.css"
diff --git "a/\350\260\242\346\261\266\351\234\226/bindClass.html" "b/\350\260\242\346\261\266\351\234\226/bindClass.html"
new file mode 100644
index 0000000..9c56a21
--- /dev/null
+++ "b/\350\260\242\346\261\266\351\234\226/bindClass.html"
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Class 与 Style 绑定</title>
+</head>
+<style>
+    .static {
+        width: 300px;
+    }
+    
+    .active {
+        height: 20px;
+        background-color: aquamarine;
+    }
+    
+    .error {
+        background-color: rgb(250, 169, 169);
+        margin: auto;
+    }
+</style>
+
+<body>
+    <div id="app">
+        <!-- v-bind的基本用法 -->
+        <a v-bind:href="url">百度一下</a>
+        <br>
+        <br>
+        <!-- v-bind对象语法 -->
+        <div :class="{'active':isActive}">v-bind对象语法 切换属性</div>
+        <br>
+        <div class="static" :class="{'active':isActive,'error':isError}">
+            <p> v-bind对象语法传入多个属性</p>
+        </div>
+        <br>
+        <div :class='classes'>v-bind对象语法绑定一计算属性</div>
+        <br>
+        <!-- v-bind数组语法 -->
+        <div :class="[activeCls,errorCls]">v-bind数组语法</div>
+        <br>
+        <div :class="[isActive?activeCls:'',errorCls]">使用三元表达式根据条件切换class</div>
+        <br>
+        <button :class="butClass">点击</button>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                url: 'https://www.baidu.com',
+                isActive: true,
+                isError: false,
+                error: null,
+                activeCls: 'active',
+                errorCls: 'error',
+                size: 'large',
+                disabled: true,
+            },
+            computed: {
+                classes: function() {
+                    return {
+                        active: this.isActive && !this.error,
+                        'text-fail': this.error && this.error.type === 'fail'
+                    }
+                },
+                butClass: function() {
+                    return [
+                        'btn', {
+                            ['btn-' + this.size]: this.size !== '',
+                            ['btn-disabled']: this.disabled
+                        }
+                    ]
+                }
+
+            }
+        })
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/bindStyle.html" "b/\350\260\242\346\261\266\351\234\226/bindStyle.html"
new file mode 100644
index 0000000..f4e6d12
--- /dev/null
+++ "b/\350\260\242\346\261\266\351\234\226/bindStyle.html"
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>v-bind绑定style</title>
+</head>
+
+<body>
+    <div id="app">
+        <button @click='fontSize+=3'>点击文字加大</button>
+        <div :style="{'color': color,'fontSize':fontSize+'em'}">文本</div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                color: 'red',
+                fontSize: 1
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/index-1.html" "b/\350\260\242\346\261\266\351\234\226/text/index-1.html"
similarity index 100%
rename from "\350\260\242\346\261\266\351\234\226/index-1.html"
rename to "\350\260\242\346\261\266\351\234\226/text/index-1.html"
diff --git "a/\350\260\242\346\261\266\351\234\226/index-2.html" "b/\350\260\242\346\261\266\351\234\226/text/index-2.html"
similarity index 100%
rename from "\350\260\242\346\261\266\351\234\226/index-2.html"
rename to "\350\260\242\346\261\266\351\234\226/text/index-2.html"
diff --git "a/\350\260\242\346\261\266\351\234\226/index-3.html" "b/\350\260\242\346\261\266\351\234\226/text/index-3.html"
similarity index 100%
rename from "\350\260\242\346\261\266\351\234\226/index-3.html"
rename to "\350\260\242\346\261\266\351\234\226/text/index-3.html"
diff --git "a/\350\260\242\346\261\266\351\234\226/index-4.html" "b/\350\260\242\346\261\266\351\234\226/text/index-4.html"
similarity index 99%
rename from "\350\260\242\346\261\266\351\234\226/index-4.html"
rename to "\350\260\242\346\261\266\351\234\226/text/index-4.html"
index d1a871a..80de12d 100644
--- "a/\350\260\242\346\261\266\351\234\226/index-4.html"
+++ "b/\350\260\242\346\261\266\351\234\226/text/index-4.html"
@@ -25,6 +25,7 @@
         <!-- !concat():数组的拼接 app.books.concat([{name:"java",author:"xxx"}]) -->
         <!--!slice(p1[开始位置，包含开始位置],p2[结束位置，不包含结束位置]):获取一个子数组  app.books.slice(1,3) -->
 
+        <hr>
         <!-- 过滤与排序 -->
         <ul>
             <!-- 过滤 -->
diff --git "a/\350\260\242\346\261\266\351\234\226/index-5.html" "b/\350\260\242\346\261\266\351\234\226/text/index-5.html"
similarity index 100%
rename from "\350\260\242\346\261\266\351\234\226/index-5.html"
rename to "\350\260\242\346\261\266\351\234\226/text/index-5.html"
diff --git "a/\350\260\242\346\261\266\351\234\226/index-6.html" "b/\350\260\242\346\261\266\351\234\226/text/index-6.html"
similarity index 98%
rename from "\350\260\242\346\261\266\351\234\226/index-6.html"
rename to "\350\260\242\346\261\266\351\234\226/text/index-6.html"
index 04194d6..7b1b5b4 100644
--- "a/\350\260\242\346\261\266\351\234\226/index-6.html"
+++ "b/\350\260\242\346\261\266\351\234\226/text/index-6.html"
@@ -20,9 +20,6 @@
         <hr>
         <br>
         <br>
-        <br>
-        <br>
-        <br>
         <!-- 阻止事件冒泡 button冒泡到div上面去了-->
         <div @click="show(message,$event)">
             <button @click.stop="show(message,$event)">点击我</button>
diff --git "a/\350\260\242\346\261\266\351\234\226/vFor.html" "b/\350\260\242\346\261\266\351\234\226/vFor.html"
new file mode 100644
index 0000000..6144a14
--- /dev/null
+++ "b/\350\260\242\346\261\266\351\234\226/vFor.html"
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>v-for 循环数组</title>
+</head>
+
+<body>
+    <div id="app">
+        <!-- v-for 循环数组 -->
+        <ul>
+            <li v-for='book in books'>{{book.name}}</li>
+        </ul>
+        <br>
+        <p v-for='(book,index) in books'>索引:{{index}} - {{book.name}}</p>
+        <br>
+        <ul>
+            <template v-for='book in books'>
+                <li>书名：{{book.name}}</li>
+                <li>作者：{{book.author}}</li>
+            </template>
+        </ul>
+        <br>
+        <!-- v-for 遍历对象 -->
+        <span v-for='value in user'>{{value}}-</span>
+        <br>
+        <li v-for='(value,key,index) in user'>{{index}}-{{key}}-{{value}}</li>
+
+
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                books: [{
+                    id: 1,
+                    name: '《Vue.js实战》',
+                    author: '梁灏'
+                }, {
+                    id: 2,
+                    name: 'JavaScript语言精粹》',
+                    author: 'Douglas Crockford'
+
+                }, {
+                    id: 3,
+                    name: '《JavaScript高级程序设计》',
+                    author: 'Nicholas C.Zakas'
+                }, ],
+                user: {
+                    name: 'Aresn',
+                    gender: '男',
+                    age: 26,
+                }
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/vfor-1.html" "b/\350\260\242\346\261\266\351\234\226/vfor-1.html"
new file mode 100644
index 0000000..5aa2ff5
--- /dev/null
+++ "b/\350\260\242\346\261\266\351\234\226/vfor-1.html"
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>v-for 数组更新-过滤</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <link rel="stylesheet" href="./Css/css-1.css">
+</head>
+
+<body>
+    <div id='app'>
+        <ul>
+            <li v-for="book in books">{{book.name}}-{{book.author}} </li>
+        </ul>
+        <!-- push():添加一个数组元素   app.books.push({name:"《css揭秘》",author:"[希] lex verou"})-->
+        <!-- pop():删除数组结尾的元素,无参数  app.books.pop()-->
+        <!-- shift():删除数组开头的元素  app.books.shift() -->
+        <!-- unshift():在数组的开头添加元素  app.books.unshift({name:"《将进酒》",author:"李白"})-->
+        <!-- splice(p1[索引],p2[删除数目],p3[插入元素]):从数组中删除一些元素，插入一些元素;  app.books.splice(1,0,{name:"将进酒",author:"李白"})-->
+        <!-- sort():数组排序 -->
+        <!-- reverse():数组反转 -->
+        <!-- filter():数组过滤  -->
+        <!-- !concat():数组的拼接 app.books.concat([{name:"java",author:"xxx"}]) -->
+        <!--!slice(p1[开始位置，包含开始位置],p2[结束位置，不包含结束位置]):获取一个子数组  app.books.slice(1,3) -->
+
+        <hr>
+        <!-- 过滤与排序 -->
+        <ul>
+            <!-- 过滤 -->
+            <template v-for="book in filterBooks">
+                <li>书名:{{book.name}}</li>
+                <li>作者:{{book.author}}</li>
+            </template>
+            <hr>
+            <template v-for="book in sortedBooks">
+                <li>书名:{{book.name}}</li>
+                <li>作者:{{book.author}}</li>
+            </template>
+        </ul>
+
+    </div>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                books: [{
+                    name: '《Vue.js实践》',
+                    author: '梁灏'
+                }, {
+                    name: '《JavaScript语言精粹》',
+                    author: "Douglas Crockford"
+                }, {
+                    name: '《JavaScript高级程序设计》',
+                    author: "Nicholas C.Zakas"
+                }, ],
+            },
+            computed: {
+                filterBooks: function() {
+                    return this.books.filter(function(book) {
+                        return book.name.match(/Vue/);
+                    });
+                },
+                sortedBooks: function() {
+                    return this.books.sort(function(a, b) {
+                        console.log(a);
+                        console.log(b);
+                        return a.name.length < b.name.length;
+                    })
+                }
+            }
+        });
+
+        // filter(([数组元素],[索引],[元素所在的数组])=>{}[函数])
+        // app.books = app.books.filter(function(item, index, array) {
+        //     // console.log(item);
+        //     // console.log(index);
+        //     // console.log(array);
+        //     // 返回数组里面name有JavaScript的元素
+        //     return item.name.match(/JavaScript/);
+        // });
+
+
+        // 给数组添加一个元素
+        // app.books.splice(3, 1, {
+        //     name: '《CSS揭秘》',
+        //     author: "[希] Lea Verou"
+        // });
+
+        // 修改数组的长度
+        //    app.books.splice(1);
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/vif.html" "b/\350\260\242\346\261\266\351\234\226/vif.html"
new file mode 100644
index 0000000..9135611
--- /dev/null
+++ "b/\350\260\242\346\261\266\351\234\226/vif.html"
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>条件判断</title>
+</head>
+
+<body>
+    <div id="app">
+        <div> <samp>status:</samp>
+            <input type="radio" id="one" value="1" v-model="status"><label for="one">1</label>
+            <input type="radio" id="two" value="2" v-model="status"><label for="one">2</label>
+            <input type="radio" id="three" value="3" v-model="status"><label for="one">3</label>
+        </div>
+        <p v-if='status==1'>当status为1的时候显示该行</p>
+        <p v-else-if='status==2'>当status为2的时候显示该行</p>
+        <p v-else>否则显示该行</p>
+        <br>
+        <br>
+        <div v-if="type==='name'">
+            <label>用户名：</label><input type="text" placeholder="输入用户名">
+        </div>
+        <div v-else-if="type==='mail'">
+            <label>邮箱：</label><input type="text" placeholder="输入邮箱">
+        </div>
+        <button @click='handleToggleClick'>切换类型</button>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                status: '1',
+                type: 'name',
+            },
+            methods: {
+                handleToggleClick: function() {
+                    this.type = this.type === 'name' ? 'mail' : 'name'
+                }
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/\347\254\254\344\272\224\347\253\240\345\206\205\347\275\256\346\214\207\344\273\244.txt" "b/\350\260\242\346\261\266\351\234\226/\347\254\254\344\272\224\347\253\240\345\206\205\347\275\256\346\214\207\344\273\244.txt"
deleted file mode 100644
index e69de29..0000000
diff --git "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/Css/style.css" "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/Css/style.css"
new file mode 100644
index 0000000..0804c70
--- /dev/null
+++ "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/Css/style.css"
@@ -0,0 +1,24 @@
+[v-cloak] {
+    display: none;
+}
+
+table {
+    border: 1px solid #e9e9e9;
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+}
+
+th,
+td {
+    padding: 8px 16px;
+    border: 1px solid #e9e9e9;
+    text-align: left;
+}
+
+th {
+    background-color: #f7f7f7;
+    color: #5c6b77;
+    font-weight: 600;
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/Js/index.js" "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/Js/index.js"
new file mode 100644
index 0000000..9d9a310
--- /dev/null
+++ "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/Js/index.js"
@@ -0,0 +1,166 @@
+var app = new Vue({
+    el: '#app',
+    data: {
+        isAll: true,
+        list: [{
+            id: 1,
+            name: 'iPhone7',
+            price: 6188,
+            count: 1,
+            isrRadio: true,
+        }, {
+            id: 2,
+            name: 'iPad Pro',
+            price: 5888,
+            count: 1,
+            isrRadio: true,
+        }, {
+            id: 3,
+            name: 'MacBook Pro',
+            price: 21488,
+            count: 1,
+            isrRadio: true,
+        }],
+        catList: [{
+            ctaName: "电子产品",
+            list: [{
+                id: 1,
+                name: 'iPhone7',
+                price: 6188,
+                count: 1,
+                isrRadio: true,
+            }, {
+                id: 2,
+                name: 'iPad Pro',
+                price: 5888,
+                count: 1,
+                isrRadio: true,
+            }, {
+                id: 3,
+                name: 'MacBook Pro',
+                price: 21488,
+                count: 1,
+                isrRadio: true,
+            }]
+        }, {
+            ctaName: "水果",
+            list: [{
+                id: 4,
+                name: '西瓜',
+                price: 2,
+                count: 1,
+                isrRadio: true,
+            }, {
+                id: 5,
+                name: '苹果',
+                price: 5,
+                count: 1,
+                isrRadio: true,
+            }, {
+                id: 6,
+                name: '香蕉',
+                price: 2,
+                count: 1,
+                isrRadio: true,
+            }]
+        }]
+    },
+    methods: {
+        handleReduce: function(index, id) {
+            // if (this.catList[index].list[] === 1) return;
+            // this.list[index].count--;
+
+            this.catList.forEach(element => { // element 表示数组元素
+
+                if (element.list[index].id === id) {
+                    console.log(element.list[index].id);
+                    if (element.list[index].count === 1) return;
+                    element.list[index].count--;
+                }
+            })
+        },
+        handleAdd: function(index, id) {
+            // console.log(index);
+            // this.list[index].count++;
+            this.catList.forEach(element => { // element 表示数组元素
+                if (element.list[index].id === id) {
+                    console.log(element.list[index].id);
+                    element.list[index].count++;
+                }
+            });
+
+        },
+        handleRemove: function(Array, index) {
+            Array.splice(index, 1);
+
+            // console.log(index);
+            // this.list.splice(index, 1);
+
+            // this.catList.forEach(element => { // element 表示数组元素
+            //     console.log(this.catList[index].list[xindex].id);
+
+            //     console.log(this.catList[index].list.splice(xindex, 1));
+            //     // element.splice(xindex, 1);
+            // });
+
+            // this.catList.forEach(element => { // element 表示数组元素
+            //     // console.log(this.catList[index].list[xindex].id);
+
+            //     // console.log(element.list[index].id === id);
+            //     // console.log(id);
+            //     if (element.list[index].id === id) {
+            //         // console.log(element.list[index]);
+            //         element.list.splice(index, 1);
+            //     }
+
+            //     // element.splice(xindex, 1);
+            // });
+
+            // for (var i = 0; i < this.catList.length; i++) {
+
+            //     console.log(this.catList[index]);
+            //     this.catList[index].list.splice(xindex, 0);
+            // }
+            // console.log(this.catList[index].list.length);
+        },
+        // 全选 
+        hendleAll: function() {
+            this.catList.forEach(element => {
+                element.list.forEach(ele => {
+                    ele.isrRadio = this.isAll;
+                })
+            });
+        },
+        // 单选
+        hendleRadio: function() {
+            var isFalse = true;
+            this.catList.forEach(element => {
+                element.list.forEach(ele => {
+                    if (ele.isrRadio == false) {
+                        isFalse = false;
+                    }
+                });
+            });
+
+            if (!isFalse) {
+                this.isAll = false;
+            } else {
+                this.isAll = true;
+            }
+        }
+    },
+    computed: {
+        totalPrice: function() {
+            var total = 0;
+            this.catList.forEach(element => {
+                element.list.forEach(ele => {
+                    if (ele.isrRadio) {
+                        total += ele.price * ele.count;
+                    };
+                })
+            });
+            return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
+            //   return total.toLocaleString();
+        }
+    }
+})
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/index-shopp.html" "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/index-shopp.html"
index d1f530b..c9411d8 100644
--- "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/index-shopp.html"
+++ "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/index-shopp.html"
@@ -4,95 +4,54 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>实战购物车</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-    <script src="./index.js"></script>
-    <link rel="stylesheet" href="./style.css">
+    <title>购物车</title>
+    <link rel="stylesheet" href="./Css/style.css">
 </head>
 
 <body>
     <div id='app' v-cloak>
         <template v-if='list.length'>
-            <table>
+            <table >
                 <thead>
                     <tr>
-                        <th></th>
+                        <!-- 根据选中的来双向绑定，根据事件来调用方法  -->
+                        <th><input type="checkbox" v-model:checked='isAll'  @change="hendleAll()"  ></th>
+                        <th>商品类别</th>
+                        <th>id</th>
                         <th>商品名称</th>
                         <th>商品单价</th>
                         <th>购买数量</th>
                         <th>操作</th>
                     </tr>
                 </thead>
-                <tbody>
-                    <tr v-for="(item,index) in list">
-                        <td>{{index+1}}</td>
-                        <td>{{item.name}}</td>
-                        <td>{{item.price}}</td>
-                        <td>
-                            <button @click='handleReduce(index)' :disabled="item.count===1">-</button>
-                            {{item.count}}
-                            <button @click='handleAdd(index)'>+</button>
-                        </td>
-                        <td>
-                            <button @click='handleRemove(index)'>移除</button>
-                        </td>
-                    </tr>
+                <tbody  v-for='(item,index) in catList' >
+                    <tr v-for=' (xi ,xindex) in item.list'>
+                        <!-- v-bind:checked 绑定动态的是否选中  v-on:change 表示变化事件，调用方法  -->
+                        <th><input type="checkbox"  v-model:checked='xi.isrRadio'  @change="hendleRadio()" ></th>
+                        <th>{{item.ctaName}}</th>
+                        <th>{{xi.id}}</th>
+                        <th>{{xi.name}}</th>
+                        <th>{{xi.price}}</th>
+                        <th>                           
+                            <button @click="handleReduce(xindex,xi.id)"  :disabled="xi.count===1">-</button>
+                            {{xi.count}}
+                            <button @click="handleAdd(xindex,xi.id)">+</button>
+                        </th>
+                        <th>
+                            <button @click="handleRemove(item.list,xindex)">移除</button>
+                        </th>
+                </tr>
                 </tbody>
             </table>
+
             <div>总价:￥{{totalPrice}}</div>
         </template>
-        <div v-else>购物车为空</div>
+        <div v-else>
+            购物车为空
+        </div>
     </div>
-    <script>
-        var app = new Vue({
-            el: '#app',
-            data: {
-                list: [{
-                    id: 1,
-                    name: 'iPhone 7',
-                    price: 6188,
-                    count: 1
-                }, {
-                    id: 2,
-                    name: 'iPad Pro',
-                    price: 5888,
-                    count: 1
-                }, {
-                    id: 3,
-                    name: 'MacBook Pro',
-                    price: 21488,
-                    count: 1
-                }, ]
-            },
-            computed: {
-                totalPrice: function() {
-                    var total = 0;
-                    for (var i = 0; i < this.list.length; i++) {
-                        var item = this.list[i];
-                        total += item.price * item.count;
-                    };
-                    // 使用正则表达式匹配钱的千位分隔符 
-                    // \B 匹配非字母和数字边界 \b 匹配字母或数字边界
-                    // "g"标志表示正则表达式使用的global（全局）的状态 全局匹配
-                    return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
-                }
-            },
-            methods: {
-                handleReduce: function(index) {
-                    if (this.list[index].count === 1) return;
-                    this.list[index].count--;
-                },
-                handleAdd: function(index) {
-                    this.list[index].count++;
-                },
-                handleRemove: function(index) {
-                    this.list.splice(index, 1);
-
-                }
-
-            }
-        })
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="./Js/index.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/index.js" "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/index.js"
deleted file mode 100644
index e69de29..0000000
diff --git "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/text/index-text1.html" "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/text/index-text1.html"
deleted file mode 100644
index b2ebd85..0000000
--- "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/text/index-text1.html"
+++ /dev/null
@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>练习1</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-
-    <link rel="stylesheet" href="../style.css">
-</head>
-
-<body>
-    <!-- 新增加一项是否选中功能，总价变为选中商品的总价 -->
-    <div id='app' v-cloak>
-        <template v-if='list.length'>
-            <table>
-                <thead>
-                    <tr>
-                        <th>全选  <input type="checkbox"  id="All" @click='checkAll'  v-model="selectArr.length===list.length" ></th>
-                        <th>商品名称</th>
-                        <th>商品单价</th>
-                        <th>购买数量</th>
-                        <th>操作</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(item,index) in list">
-                        <td> <input type="checkbox" name="" id=""  :value='index' v-model="selectArr" ></td>
-                        <td>{{item.name}}</td>
-                        <td>{{item.price}}</td>
-                        <td>
-                            <button @click='handleReduce(index)' :disabled="item.count===1">-</button>
-                            {{item.count}}
-                            <button @click='handleAdd(index)'>+</button>
-                        </td>
-                        <td>
-                            <button @click='handleRemove(index)'>移除</button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <div>总价:￥{{totalPrice}}</div>
-        </template>
-        <div v-else>购物车为空</div>
-    </div>
-    <script>
-        var app = new Vue({
-            el: '#app',
-            data: {
-                // 一个空的数组 ，用于存放选中的商品
-                selectArr: [],
-                // 商品的数组
-                list: [{
-                    id: 1,
-                    name: 'iPhone 7',
-                    price: 6188,
-                    count: 1
-                }, {
-                    id: 2,
-                    name: 'iPad Pro',
-                    price: 5888,
-                    count: 1
-                }, {
-                    id: 3,
-                    name: 'MacBook Pro',
-                    price: 21488,
-                    count: 1
-                }, ]
-            },
-            computed: {
-                // 计算商品的商品价格
-                totalPrice: function() {
-                    var _this = this;
-                    var total = 0;
-                    if (_this.selectArr.length === _this.list.length) {
-                        console.log(_this.selectArr.length)
-                        for (var i = 0; i < this.list.length; i++) {
-                            var item = this.list[i];
-                            total += item.price * item.count;
-                        };
-                        // 使用正则表达式匹配钱的千位分隔符 
-                        // \B 匹配非字母和数字边界 \b 匹配字母或数字边界
-                        // "g"标志表示正则表达式使用的global（全局）的状态 全局匹配
-                        return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
-                    } else if (_this.selectArr.length != 0 && _this.selectArr.length != _this.list.length) {
-                        for (var i = 0; i < this.selectArr.length; i++) {
-                            var item = this.selectArr[i];
-                            var it = this.list[item]
-                            total += it.price * it.count;
-                            console.log(it)
-                        }
-                        return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
-                    } else {
-                        return total
-                    }
-
-                }
-            },
-            methods: {
-                // 全部选中
-                checkAll: function(event) {
-                    var _this = this;
-                    _this.selectArr = [];
-                    if (event.currentTarget.checked) {
-                        _this.list.forEach((item, index) => {
-                            _this.selectArr.push(index)
-                        });
-                    }
-                    console.log(_this.selectArr)
-                },
-                // 减少商品数量
-                handleReduce: function(index) {
-                    if (this.list[index].count === 1) return;
-                    this.list[index].count--;
-                },
-                // 添加商品数量
-                handleAdd: function(index) {
-                    this.list[index].count++;
-                },
-                // 移除商品
-                handleRemove: function(index) {
-                    this.list.splice(index, 1);
-
-                }
-
-            }
-        })
-    </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/text/text1.html" "b/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/text/text1.html"
deleted file mode 100644
index c70cdf2..0000000
--- "a/\350\260\242\346\261\266\351\234\226/\350\264\255\347\211\251\350\275\246/text/text1.html"
+++ /dev/null
@@ -1,193 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-</head>
-
-<body>
-    <div id="app">
-        <div class="container">
-            <table class="table table-bordered table-hover">
-                <tr>
-                    <td>
-                        <!-- v-model[模型] 点击事件 -->
-                        <input type="checkbox" v-model="checkAll" @click="selectAll" />
-                    </td>
-                    <td>
-                        商品名称
-                    </td>
-                    <td>
-                        商品价格
-                    </td>
-                    <td>
-                        商品数量
-                    </td>
-                    <td>
-                        商品总额
-                    </td>
-                    <td>
-                        操作
-                    </td>
-                </tr>
-                <!-- 遍历数组[值,索引] -->
-                <tr v-for="(item,index) in listInfo">
-                    <td>
-                        <!-- v-bind:valu[指令] v-model[模型] v-on:change[事件，变化]  -->
-                        <input type="checkbox" :value="item.id" v-model="checkItem" @change="selectOne" />
-                    </td>
-                    <td>{{item.shopName}}</td>
-                    <td>{{item.shopPrice}}</td>
-                    <td>
-                        <!-- 减去商品数量 -->
-                        <button class="btn btn-default" @click="reduce(index)">-</button>
-                        <input type="text" v-model="item.shopCount" />
-                        <!-- 添加商品数量 -->
-                        <button class="btn btn-default" @click="add(index)">+</button>
-                    </td>
-                    <td>
-                        {{item.shopPrice*item.shopCount}}
-                    </td>
-                    <td>
-                        <button class="btn btn-warning" @click="del(index)">删除</button>
-                    </td>
-                </tr>
-            </table>
-            <p class="text-right">
-                金额总计:{{sum}}
-            </p>
-            <p class="text-right">
-                商品数量:{{count}}
-            </p>
-            <hr />
-            <form>
-                <div class="form-group">
-                    <input class="form-control" placeholder="商品名称" v-model="shopName" />
-                </div>
-                <div class="form-group">
-                    <input class="form-control" placeholder="商品价格" v-model="shopPrice" />
-                </div>
-                <div class="form-group">
-                    <button class="btn btn-primary" type="button" @click="addInfo">增加</button>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <script>
-        var app = new Vue({
-            el: "#app",
-            data: {
-                // listInfo数组，用于存储商品
-                listInfo: [{
-                    id: 1,
-                    shopName: "男装1",
-                    shopPrice: 1000,
-                    shopCount: 0
-                }, {
-                    id: 2,
-                    shopName: "男装2",
-                    shopPrice: 2000,
-                    shopCount: 0
-                }, {
-                    id: 3,
-                    shopName: "男装3",
-                    shopPrice: 3000,
-                    shopCount: 0
-                }, {
-                    id: 4,
-                    shopName: "男装4",
-                    shopPrice: 4000,
-                    shopCount: 0
-                }, {
-                    id: 5,
-                    shopName: "男装5",
-                    shopPrice: 5000,
-                    shopCount: 0
-                }, ],
-                // 输入的商品名
-                shopName: "",
-                // 输入的商品价格
-                shopPrice: "",
-                // 空数组用于添加选中的项
-                checkItem: [],
-                // 用于控制是否全选中
-                checkAll: false
-            },
-            methods: {
-                // 添加方法
-                add: function(index) {
-                    this.listInfo[index].shopCount++
-
-                },
-                // 减少方法
-                reduce: function(index) {
-                    if (this.listInfo[index].shopCount <= 0) {
-                        this.listInfo[index].shopCount = 0
-                    } else {
-                        this.listInfo[index].shopCount--
-                    }
-                },
-                // 移除商品
-                del: function(index) {
-                    this.listInfo.splice(index, 1)
-                },
-                // 添加一个商品
-                addInfo: function() {
-                    // alert(1)
-                    var obj = {
-                        id: this.listInfo.length + 1,
-                        shopName: this.shopName,
-                        shopPrice: this.shopPrice,
-                        shopCount: 0
-                    }
-                    console.log(obj)
-                    this.listInfo.push(obj)
-                },
-                // 全选
-                selectAll: function() {
-                    // 那一次全选都要清空 数组
-                    this.checkItem = []
-                    if (!this.checkAll) {
-                        for (var i = 0; i < this.listInfo.length; i++) {
-                            this.checkItem.push(this.listInfo[i].id)
-                        }
-                    } else {
-                        this.checkItem = []
-                        this.checkAll = false
-                    }
-                },
-                // 单选
-                selectOne() {
-                    console.log(this.checkItem)
-                    if (this.checkItem.length == this.listInfo.length) {
-                        this.checkAll = true
-                    } else {
-                        this.checkAll = false
-                    }
-                }
-            },
-            computed: {
-                sum() {
-                    var total = 0
-                    for (var i = 0; i < this.listInfo.length; i++) {
-                        total += parseFloat(this.listInfo[i].shopPrice) * parseFloat(this.listInfo[i].shopCount)
-                    }
-                    return total
-                },
-                count: function() {
-                    var total = 0
-                    for (var i = 0; i < this.listInfo.length; i++) {
-                        total += parseInt(this.listInfo[i].shopCount)
-                    }
-                    return total
-                }
-            }
-        })
-    </script>
-</body>
-
-</html>
\ No newline at end of file
-- 
Gitee


		商品类别	id	商品名称	商品单价	购买数量	操作
{{index+1}}	{{item.name}}	{{item.price}}	- - {{item.count}} - -	- -
	{{item.ctaName}}	{{xi.id}}	{{xi.name}}	{{xi.price}}	+ + {{xi.count}} + +	+ +
- - -	- 商品名称 -	- 商品价格 -	- 商品数量 -	- 商品总额 -	- 操作 -
- - -	{{item.shopName}}	{{item.shopPrice}}	- - - - - -	- {{item.shopPrice*item.shopCount}} -	- -