Vue购物车小项目

html代码

 <div id="app">
        <div class="container">
            <h1 class='page-header'>图书商城</h1>
            <table class="table table-bordered table-striped table-hover">
                <tr>
                    <th>全选
                        <input type="checkbox" name="" id="quan" @change="quersele" v-model='falg'>
                    </th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in listbook">
                    <th>
                        <input type="checkbox" name="" id="" @change="sel" class="sel" v-model="item.isSele">
                    </th>
                    <th>
                        <img :src="item.imgS" alt="">
                        <span>{{item.name}}</span>
                    </th>
                    <th>
                        <span>{{item.Price}}</span>
                    </th>
                    <th>
                        <input min="1" type="number" name="" id="" v-model="item.Count">
                    </th>
                    <th>
                        <span>{{item.Count * item.Price}}</span>
                    </th>
                    <th>
                        <button class="btn btn-success" @click="del(item)">删除</button>
                    </th>
                </tr>
                <tr>
                    <td>
                        <span>总计:{{sums()}}</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>

js代码

 var quan = document.querySelector('#quan');
    var sel = document.querySelectorAll('.sel');

    var vm = new Vue({
        el: "#app",
        data: {
            listbook: [],
            falg: true
        },
        created() {
            axios.get('./books.json').then((data) => {
                this.listbook = data.data;
            })
        },
        methods: {
            sums() {
                var sum = 0;
                for (var i = 0; i < this.listbook.length; i++) {
                    if (!this.listbook[i].isSele) {
                        continue;//跳过本次循环
                    }
                    sum += this.listbook[i].Count * this.listbook[i].Price;
                }
                return sum;
            },
            del(item) {
                this.listbook.splice(this.listbook.indexOf(item), 1);
            },
            quersele() {
                for (var i = 0; i < this.listbook.length; i++) {
                    this.listbook[i].isSele = this.falg    //改变数组里面isSele的值
                }
            },
            sel() {
                var falg = true;
                for (var i = 0; i < this.listbook.length; i++) {
                    if (!this.listbook[i].isSele) {
                        falg = false;
                    }
                }
                //  循环判断vm.list中的数据变化来修改vm对象中falg的值,默认值都是true,只要有一个的是false.
                //  就修改falg的值,这里falg起到标记作用。然后把falg的值给全选按钮  (必须复选框全部为true,全选才为true)
                //  页面(vive)中的多选框的状态是根据js请求数据的listbook.isSele来展示的。而vive中的多选框又能改变js中的数据
                //  这就叫做数据的双向绑定。
                this.falg=falg;//把falg赋值给vm.falg,全选框数据双向绑定的值是vm.falg。所以这里一变页面也就变了。
                //因为全选框的状态依赖vm的falg, (js数据影响view)
            }

        }
    })

在页面中布局好结构,在js代码中操纵数据来改变view(页面)的显示
这就是Vue中的MVVM设计模型
M---->模型 (js数据)
v----> 视图 (页面)
VM ----> 视图模型(页面数据)