在用vue做购物车小案例时，vue实例中的data是写死的，只有三项数据，给每项加上全选反选，checkbox选择为true时统计价格，这里使用计算属性computed实现价格的统计。

checkbox状态通过一个数组绑定，改变状态即可与改变数组项的布尔值，操作中发现，勾选每一项时可以触发计算属性统计价格，但是勾选全选按钮时，并不能触发计算属性。

先看看例子：

1. HTML页面（index.html）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue购物车</title>
        <link href="css/style.css" rel="stylesheet" />
    </head>
    <body>
        <div id="app" v-cloak>
            <template v-if="list.length">
                <table>
                    <thead>
                    <tr>
                        <th><input type="checkbox" v-model="checkAll" @click="handleCheckAll"></th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in list">
                        <td><input type="checkbox" v-model="checkOne[index]" @click="handleCheckOne(index)" key="{{index}}"></td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <button @click="handleReduce(index)" :disable="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 type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/shop.js"></script>
    </body>
</html>

2. 定义js（shop.js）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var app = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 1,
                name: 'iphone7',
                price: 6188,
                count: 1
            },
            {
                id: 2,
                name: 'iPad Pro',
                price: 5888,
                count: 1
            },
            {
                id: 3,
                name: 'MacBook Pro',
                price: 21488,
                count: 1
            }
        ],
        checkAll: false,
        checkOne: [false,false,false]
    },
    computed: {
        totalPrice: function(){
            console.log(123);
            var total = 0;
            for(var i =  0; i < this.checkOne.length; i++){
                if(this.checkOne[i]){
                    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);
        },
        //全选
        handleCheckAll: function(){
            for(var i = 0; i < this.checkOne.length; i++){
                // this.checkOne[i] = !this.checkAll;
                Vue.set( this.checkOne, i, !this.checkAll);
            }
        },
        //单选
        handleCheckOne: function(index){
            this.checkOne[index] = true;
        }
    }
});

3. 定义css（style.css）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[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: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
}

我们查看官方文档深入响应式原理的检测变化的注意事项有这样一段话：

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

简单理解为：受JavaScript语言本身限制，Vue不能够检测到对对象属性的变更。再看我这个小例子，全选函数handleCheckAll中对数组进行遍历赋值，也就是对数组的属性进行操作，此时vue是检测不到的，但是单选函数操作为什么是正常，有点小疑问？
解决办法有两种，都按照下面的办法写才是标准的。

Vue.set(vm.someObject, 'b', 2)，将响应属性添加到嵌套的对象上；this.$set(this.someObject,'b',2)，这也是全局 Vue.set 方法的别名。

对应上面例子中的写法Vue.set( this.checkOne, i, !this.checkAll);。