Vue.js实现购物车结算

  1. 使用computed计算属性实现简单的购物车结算功能。
  2. 实现全选和不选的功能。
  3. 使用watch函数来监听checkboxList属性,实现全选按钮选中或者取消的功能。
  4. 网页样式使用bootstrap实现。
    Vue.js实现购物车结算_第1张图片

<html>
    <head>
        <meta charset="utf-8">
        <title>购物车title>
        <script src="./js/vue.js">script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
        <style>
            [v-cloak]{
      
                display: none;
            }
        style>
    <body>
        <div id="app" v-cloak>
            <div class="container">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>
                                <label for="selectedAll">全选label> <input type="checkbox" v-model='checked' @click='checkedAll' >
                            th>
                            <th>商品th>
                            <th>单价th>
                            <th>数量th>
                            <th>小计th>
                            <th>操作th>
                        tr>
                    thead>
                    <tbody>
                        <tr v-for="(item,index) in goodsLists">
                            <td>
                                <input type="checkbox" v-model='checkboxList' :value="item.id">
                            td>
                            <td>
                                <img :src="item.productCover" alt="" width="50px" height="70px" />
                                <span>{
    {item.productName}}span>
                            td>
                            <td>
                                {
    {item.productPrice}}
                            td>
                            <td>
                                <input type="button" value="-" v-on:click="sub(item.id,item.productCount)" />
                                <input type="text" v-model:value="item.productCount" @focusout="change(item.id,item.productCount)" size="1">
                                <input type="button" value="+" v-on:click="add(item.id,item.productCount)" />
                            td>
                            <td >
                                ¥{
    {(item.productPrice*item.productCount).toFixed(2)}}
                            td>
                            <td><button class="btn btn-danger">删除button>td>
                        tr>
                    tbody>
                table>
                <div class="text-right" :bind="grandTotal">需要支付:{
    {total.toFixed(2)}}¥div>
            div>
        div>
        <script>
            var vm = new Vue({
      
                el: "#app",
                data: {
      
                    goodsLists: [{
      
                            id: 1,
                            productCover: 'img/book1.jpg',
                            productName: 'Java编程思想(第4版)',
                            productCount: 1,
                            productPrice: 89.00
                        },
                        {
      
                            id: 2,
                            productCover: 'img/book2.jpg',
                            productName: '高等数学(第七版)(上册)',
                            productCount: 1,
                            productPrice: 43.00
                        },
                        {
      
                            id: 3,
                            productCover: 'img/book3.jpg',
                            productName: '教育心理学(第三版)',
                            productCount: 1,
                            productPrice: 53.90
                        }
                    ],
                    checkboxList: [],
                    total: 0,
                    checked: false
                },
                methods: {
      
                    //数量增加
                    add: function(productID, productCount) {
      
                        //数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
                        var ret = this.goodsLists.find((item)=> {
      
                            return item.id === productID
                        })
                        ret.productCount = ret.productCount + 1
                    },
                    //数量减少
                    sub: function(productID, productCount) {
      
                        var ret = this.goodsLists.find((item)=> {
      
                            return item.id === productID
                        })
                        if (productCount >1) {
      
                            ret.productCount = ret.productCount - 1
                        }
                    },
                    change: function(productID, productCount){
      
                        var ret = this.goodsLists.find((item)=> {
      
                            return item.id === productID
                        })
                        if (productCount<1||productCount==="") {
      
                            ret.productCount =1
                        }
                    },
                    checkedAll:function(){
      
                        //实现全选和不选
                        console.log(this.checked);
                        if (this.checked) {
      
                            this.checkboxList = []
                        } else {
      
                            this.checkboxList = [];
                            this.goodsLists.forEach((item) => {
      
                                this.checkboxList.push(item.id);
                            });
                        }
                    }
                },
                //计算属性
                computed: {
      
                    //当data中的checkboxList 的值改变的时候,grandTotal会自动发生计算  
                    grandTotal: function() {
      
                        this.total = 0
                        for (var i = 0; i < this.checkboxList.length; i++) {
      
                            //计算总价格
                            this.total += this.goodsLists[i].productCount * this.goodsLists[i].productPrice
                        }
                        //返回结算结果
                        return this.total
                    }
                },
                //侦听器
                watch:{
      
                    //watch函数来监听checkboxList属性,当其长度==元素的长度时,全选按钮选中,否则取消。
                    checkboxList:function(){
      
                        if(this.checkboxList.length==this.goodsLists.length){
      
                            this.checked=true;//选中
                        }else{
      
                            this.checked=false;//取消选中
                        }
                    }
                }
            })
        script>
    body>
html>

欢迎大家阅读,本人见识有限,写的博客难免有错误或者疏忽的地方,还望各位指点,在此表示感激不尽。文章持续更新中…

你可能感兴趣的:(Vue.js,vue,html,css,jquery,javascript)