<div id="app">
    <div class="main">
        <div class="check-header">选择三门课程，减免三门中单价最低课程价格</div>
        <div  class="check-list">
            <ul>
                <li v-for="(item,index) in goodsList">
                    <div class="top fl" @click="change(index)">
                        <img :src="item.isSelect ? 'images/check_box_unselected.png' : 'images/check_box_selected.png'" />
                    </div>
                    <div class="middle pic fl"></div>
                    <div class="fnally fr">
                        <p class="title">{{item.title}}</p>
                        <p class="money">¥{{item.money}}</p>
                        <p class="remove">删除</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="check-footer">
            <div class="foot-submit">
                <div class="sum"><p class="sum-left"><span>总计：</span><span class="red">¥200.00</span></p><p><span>优惠</span><span>¥100.00</span></p></div>
                <input type="submit" class="end" value="去结算"/>
            </div>
        </div>
    </div>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            goodsList: [
                {
                    id: 0,
                    isSelect: false,
                    title: '绿野仙踪绘本课',
                    money: '100.00'
                },
                {
                    id: 1,
                    isSelect: false,
                    title: '绿野仙踪绘本课',

                    money: '100.00'
                },
                {
                    id: 2,
                    isSelect: false,
                    title: '绿野仙踪绘本课',
                    money: '100.00'
                },
                {
                    id: 3,
                    isSelect: true,
                    title: '绿野仙踪绘本课',
                    money: '100.00'
                },
            ]
        },
        methods: {
            change:function(index){
                var goodsList = this.goodsList;
                var flag =this.goodsList[index].isSelect;
                var num = 0;
                console.log(flag);
                if(flag){
                    this.goodsList[index].isSelect = !this.goodsList[index].isSelect;
                }else{
                for (var i = 0; i < goodsList.length; i++) {
                    if (goodsList[i].isSelect) {
                        num++;
                    }
                }
                if (num == 3) {
                    alert('只能选择三门');
                    return;
                }
                this.goodsList[index].isSelect = !this.goodsList[index].isSelect;
                }
            },
        }
    })
</script>