vue购物车

<body>
    <div id="test">
        <table id="mytable">
            <tr>
                <th><input type="checkBox"  @click="selectProduct()" v-bind:checked="isSelectAll" />全选</th>
                <th>书名</th>
                <th>数量</th>
                <th>单价</th>
                <th>总价</th>
                <th>操作</th>
            </tr>

            <tr v-for="(item,index) in productList">
                <td><input type="checkBox" v-bind:checked="item.isSelect" @click="item.isSelect=!item.isSelect"/></td>
                <td>{{item.proName}}</td>
                <td>
                    <span><a @click="item.proNum--">-</a></span>
                    {{item.proNum}}
                    <span><a @click="item.proNum++">+</a></span>
                </td>
                <td>{{item.proPrice}}</td>
                <td>{{item.proPrice*item.proNum}}</td>
                <td><a @click="deletePro(index)">删除</a></td>
            </tr>
        </table>

        <div class="checkPro">
            <div class="left">
                <span><a  @click="deleteProduct">删除所选产品</a></span>
            </div>
            <div class="right">
                <span>{{getTotal.totalNum}}本图书总计{{getTotal.totalPrice}}元</span>
            </div>
        </div>
    </div>
</body>


<script >
    new Vue({
        el : "#test",
        data : {
            productList:[
                {
                    'proName' :'操作系统',
                    'proNum' : 2,
                    'proPrice' :30,
                },
                {
                    'proName' :'组成原理',
                    'proNum' : 5,
                    'proPrice' :25,
                },
                {
                    'proName' :'编译原理',
                    'proNum' : 1,
                    'proPrice' :30,
                }
            ],
        },

        methods:{
            deletePro:function(index){
                this.productList.splice(index,1);
            },

            deleteProduct:function(){
                this.productList=this.productList.filter(function (item) {return !item.isSelect})
            },

            selectProduct:function(){
                for (var i=0;i<this.productList.length; i++) {
                    this.productList[i].isSelect=true;
                }
            },
        },

        mounted:function () {
            var _this=this;
            this.productList.map(function (item) {
                _this.$set(item, 'isSelect', true);
            })
        },

        computed:{
            getTotal:function(){
                var prolist=this.productList.filter(function (val) { return val.isSelect}),
                totalPri=0;
                for (var i=0,len=prolist.length; i<len; i++) {
                    totalPri+=prolist[i].proPrice*prolist[i].proNum;
                }
                return {totalNum:prolist.length,totalPrice:totalPri}
            },

            isSelectAll:function(){
                return this.productList.every(function (val) { return val.isSelect});
            },
        },

    
    })
</script>

</html>

table{width: 1200px;}
table th{width: 100px}
table td{width: 200px;text-align: center;}
a{text-decoration:none;color: black}
span{font-size: 20px;margin: 10px 10px}
strong{border: 1px solid;}
.checkPro{
padding-right:450px;
padding-left:50px;
}
.left{
float: left;

}
.right{
float: right;
}

vue购物车

推荐阅读更多精彩内容