diff --git "a/\346\233\276\345\277\227\345\213\207/css/style.css" "b/\346\233\276\345\277\227\345\213\207/css/style.css"
new file mode 100644
index 0000000000000000000000000000000000000000..f913a76e43c0e3a99fd7386e689bbeec1968a4c4
--- /dev/null
+++ "b/\346\233\276\345\277\227\345\213\207/css/style.css"
@@ -0,0 +1,20 @@
+[v-cloak]{
+    display:none;
+}
+table{
+    border: 1px solid #e9e9ee;
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+}
+th,td{
+    padding: 8px 16px;
+    border: 1px solid #e9e9ee;
+    text-align: left;
+}
+th{
+    background: #f7f7ff;
+    color: #5c6b77;
+    font-weight: 600;
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git "a/\346\233\276\345\277\227\345\213\207/js/index.js" "b/\346\233\276\345\277\227\345\213\207/js/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2a073e019b0f24eb66c0b28e840f71c3a004b25d
--- /dev/null
+++ "b/\346\233\276\345\277\227\345\213\207/js/index.js"
@@ -0,0 +1,116 @@
+var app=new Vue({
+    el:'#app',
+    data: {
+        list: [
+            {
+                id:1,
+                name:'iphone 7',
+                price:6188,
+                count:1,
+                isBuy:false
+            },
+            {
+                id:2,
+                name:'ipad pro',
+                price:5888,
+                count:1,
+                isBuy:false
+            },
+            {
+                id:3,
+                name:'MacBook pro',
+                price:21488,
+                count:1,
+                isBuy:false
+            }
+        ],
+        checkBoxModel: [],
+        allp: false
+    },
+    computed:{
+            totalPrice: function () {            
+                var total = 0;            
+                for (var i = 0; i < this.list.length; i++) {                
+                    if (this.list[i].isBuy) {                    
+                        var item = this.list[i];                    
+                        total += item.price * item.count;                
+                    }            
+                }            
+                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);
+        },
+        allPick: function () {            
+            var _this = this;            
+            if (_this.allp) {                
+                _this.checkBoxModel = [];                
+                _this.allp = false;            } 
+                else {                
+                    _this.checkBoxModel = [];               
+                    _this.list.forEach(function (item) {                    
+                    _this.checkBoxModel.push(item.id);                
+                });                
+                _this.allp = true;            
+            }            
+            //全选的实现通过checkBoxModel的状态        
+        },        
+        pickOne: function (index) {            
+            if (this.list[index].isBuy) {                
+                this.list[index].isBuy = false;            
+            } else {                
+                this.list[index].isBuy = true;            
+            }            
+            //单选的实现依靠的是isBuy通过click的切换实现        
+        },        
+        checkPick: function () {            
+            _this = this;            
+            var sumPic = 0;            
+            for (var i = 0; i < _this.list.length; i++) {                
+                if (_this.list[i].isBuy) {                    
+                    sumPic++;                
+                }            
+            }            
+            if (sumPic == _this.list.length) {                
+                _this.allp = true;            
+            } else {                
+                _this.allp = false;            
+            }        
+        },        
+        checkModel: function () {            
+            _this = this;            
+            if (_this.checkBoxModel.length) 
+            {                
+                newArr = _this.checkBoxModel.concat();                
+                console.log(newArr);                
+                for (var i = 0; i < _this.checkBoxModel.length; i++) {                    
+                    newone = newArr.shift().toString();                    
+                    //console.log(newone);                    
+                    _this.list[newone - 1].isBuy = true;                    
+                    //console.log(newone);                    
+                    // console.log(_this.list[newone-1]);                
+                }            
+            } else {                
+                newArr = _this.checkBoxModel.concat();                
+                //console.log(newArr);                
+                for (var i = 0; i < _this.list.length; i++) {                    
+                    _this.list[i].isBuy = false;                
+                }            
+            }            
+            // 利用checkBoxModel的绑定的状态来分别给每个物品确认isBuy的状态，避免与pickOne的冲突        
+
+        }
+        
+    }
+});
\ No newline at end of file
diff --git "a/\346\233\276\345\277\227\345\213\207/shopping.html" "b/\346\233\276\345\277\227\345\213\207/shopping.html"
new file mode 100644
index 0000000000000000000000000000000000000000..809b5bb89569218f75a8ab6f1f94b380eddef4f8
--- /dev/null
+++ "b/\346\233\276\345\277\227\345\213\207/shopping.html"
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>购物车示例</title>
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+</head>
+<body>
+        <!-- 生产环境版本，优化了尺寸和速度 -->
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+   
+    <div id="app" v-cloak>
+        <template v-if="list.length">
+            <table>
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>商品名称</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>
+                        <td>                            
+                            <input type="checkbox" :value="item.id" v-model="checkBoxModel" @click.stop="pickOne(index),checkPick()">                        
+                        </td>
+                    </tr>
+                    <tr>                        
+                        <td></td>                        
+                        <td></td>                        
+                        <td></td>                        
+                        <td></td>                        
+                        <td>全选</td>                        
+                        <td>                            
+                            <input type="checkbox" @click="allPick(),checkModel()" v-model="allp">                        
+                        </td>                    
+                    </tr>
+
+                </tbody>
+            </table>
+            <div>{{ checkBoxModel }}</div>
+            <div>总价：￥ {{ totalPrice }} </div>
+        </template>
+        <div v-else>购物车为空</div>
+    </div>
+    <script src="http://unpkg.com/vue/dist/vue.min.js"></script>
+    <script src="js/index.js"></script>
+</body>
+</html>
\ No newline at end of file