vue实现购物车功能

通过官网和视频的学习，使用vue写出了购物车的功能

下面直接上代码

<style>
        p{
            margin:0;
        }
        ul,li{
            list-style:none;
            padding:0;
            margin:0;
        }
        .cart{
            width:50%;
            margin:50px auto;
        }
        .cart li{
            width:100%;
            height:50px;
        }
        .prolist div,.prolist p{
            display:inline-block;
        }
        .chobox{
            width:20px;
            height:20px;
            position:relative;
        }
        .chobox .cho,.chobox .nocho{
            width:20px;
            height:20px;
            position:absolute;
            left:0;
            top:0;
            border-radius:10px;
            background:greenyellow;
        }
        .chobox .nocho{
            z-index:1;
            background:pink;
        }
        .chobox2 .nocho{
            display:none;
        }
        .pro_num span,.pro_num input{
            width:20px;
            height:20px;
            line-height:20px;
            float:left;
            text-align:center;
        }
        .pro_num input{
            width:40px;
            height:18px;
            border-top:1px solid #ccc;
            border-bottom:1px solid #ccc;
        }
        .pro_num span{
            border:1px solid #ccc;
        }
        .pro_num span.plus{
            border-radius:3px 0 0 3px;
        }
        .pro_num span.sub{
            border-radius:0 3px 3px 0;
        }
        .tab{
            width:100%;
            float:left;
            margin-bottom:10px;
        }
        .tab li{
            float:left;
            width:100px;
            height:20px;
            line-height:20px;
        }
        .prolist{
            clear:both;
        }
    </style>

<div class="cart" id="cart">
       <!-- hash的用法-->
        <ul class="tab">
            <li>
                <a href="#all">全部</a>
            </li>
            <li>
                <a href="#cho">选中</a>
            </li>
            <li>
                <a href="#nocho">未选中</a>
            </li>
        </ul>
        <ul class="prolist">
            <li v-for="todo in newtodos">
                <div class="perpro">
                    <input type="checkbox" v-model="todo.ischeck" style="display:none">
                    <div :class="['chobox',{chobox2:todo.ischeck}]" @click="choose(todo)">
                        <div class="cho"></div>
                        <div class="nocho"></div>
                    </div>
                    <p>{{todo.name}}</p>
                    <p>￥{{todo.pri}}</p>
                    <p class="pro_num">
                        <span class="plus" @click="plus(todo)">+</span>
                        <input type="text" v-model="todo.num" @input="chgval()">
                        <span class="sub" @click="sub(todo)">-</span>
                    </p>
                </div>
            </li>
        </ul>
        <button @click="allcho()">全选</button>
        <button @click="allno()">全不选</button>
        <button @click="invert
        ()">反选</button>
        <p>选中数量为：<span>{{ttlnum}}</span></p>
        <p>总价为：{{ttlpri}}</p>
    </div>

 <script>
        var filter={
            all:function(items){
                return items
            },
            cho:function(items){
                return items.filter(function(item){
                    return item.ischeck
                })
            },
            nocho:function(items){
                return items.filter(function(item){
                    return !item.ischeck
                })
            }
        }
        var vm2=new Vue({
            el:"#cart",
            data:{
                todos:[
                    {name:"水果糖",pri:"18.00",num:0,ischeck:true},
                    {name:"棉花糖",pri:"15.00",num:0,ischeck:false},
                    {name:"薄荷糖",pri:"18.00",num:0,ischeck:false}
                ],
                ttlpri:0,
                curhash:"all"//记录当前的hash
            },
            computed:{
                ttlnum:function(){
                    return this.todos.filter(function(todo){
                        return todo.ischeck
                    }).length
                },
                newtodos:function(){
                    return filter[this.curhash]?filter[this.curhash](this.todos):this.todos;
                }
            },
            methods:{
                choose:function(todo){
                    todo.ischeck=!todo.ischeck;
                    this.ttl();
                },
                ttl:function(){
                    var thi=this;
                    this.ttlpri=0;
                    thi.todos.forEach(function(todo){
                        if(todo.ischeck){
                            thi.ttlpri+=todo.pri*todo.num
                        }
                    })
                },
                chgval:function(){
                    this.ttl();
                },
                plus:function(todo){
                    todo.num++;
                    this.ttl();
                },
                sub:function(todo){
                    if(todo.num>=1){
                        todo.num--;
                        this.ttl();
                    }
                },
                allcho:function(){
                    //全选
                    this.todos.forEach(function(todo){
                        todo.ischeck=true
                    })
                },
                allno:function(){
                    //全不选
                    this.todos.forEach(function(todo){
                        todo.ischeck=false
                    })
                },
                invert:function(){
                    //反选
                    this.todos.forEach(function(todo){
                        todo.ischeck=!todo.ischeck
                    })
                }
            }
        })
        //记录当前hash
        function listenhash(){
            var hash=window.location.hash.slice(1);
            vm2.curhash=hash;
            console.log(vm2.curhash);
        }
        listenhash();
        window.addEventListener("hashchange",listenhash);
    </script>

切记，所有增删改查都是改变了渲染进页面的列表。