首页 > > 网页制作 > css >

基于vue的购物车清单

2019-08-26 05:47:23来源：博客园阅读 ()

基于vue的购物车清单

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">
</head>

<body>
    <div id="app">
        <!-- bootstrap  基本样式+增强样式-->
        <div class="container">

            <div class="row">
                <h2 class="text-warning">购物车</h2>
                <table class="table table-hover table-bordered">

                    <tr>
                        <th>全选 <input type="checkbox" v-model="checkAll"></th>
                        <td>商品</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>小计</td>
                        <td>操作</td>
                    </tr>
                    <!-- 括号与in之间要加空格不然会语法错误 -->
                    <tr v-for="(product,index) in products">
                        <td><input type="checkbox" v-model="product.isSelected"></td>
                        <!-- 使用vue指令动态绑定图片的相关信息 -->
                        <td><img :src="product.productCover" :title="product.productName"
                                alt="1">{{product.productName}}</td>
                        <td>{{product.productPrice}}</td>
                        <td><input type="number" min="1" v-model.number.lazy="product.productCount"
                                onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
                                onafterpaste="this.value=this.value.replace(/\D|^0/g,'')"></td>
                        <!-- 通过过滤器展示更好地效果 -->
                        <td>{{product.productCount*product.productPrice | toFixed(2)}}</td>
                        <td><button type="button" class="btn btn-danger" @click='removes(product)'>删除</button></td>
                    </tr>
                    <tr>
                        <td colspan="6">总价格：{{sum | toFixed(2)}} </td>
                    </tr>
                </table>
            </div>

        </div>
    </div>
</body>
<!-- vue基于依赖关系引入位置放哪都行 -->
<script src="node_modules\axios\dist\axios.js"></script>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        // 当给全选赋值时应要影响其他人的变化，当页面刷新时，时根据下面的
        // checkbox计算出来的结果给全选赋值
        computed: { //放在computed中最后也会放在vm上，不能与methods等重名
            checkAll: {
                //当products变化会重新计算
                get() { //get和set this指向实例，v-model会获取checkAll得值，会调用get方法
                    return this.products.every(p => p.isSelected);
                },
                set(val) { //当我们给checkbox赋值的时候调用,val等于checkAll的值
                    this.products.forEach(p => p.isSelected = val)
                }
             
            }, 
              //sum的值会被缓存
            sum() { //将计算属性写成函数则默认调用get
                return this.products.reduce((pre, next) => {
                    if (!next.isSelected) return pre;
                    return pre + next.productPrice * next.productCount;
                }, 0)
            }
        },
        filters: {
            toFixed(input, num) { //第二个参数为小数点个数
                return '￥' + input.toFixed(num);
            }
        },
        //专门用来发送AJAX的方法
        created() { //数据初始化会被调用，this指向的也是vm实例，钩子函数
            this.getData();
        },
        data: {
            products: [],
        },
        methods: {
            removes(p) {
                this.products = this.products.filter(item => item !== p);
            },
            getData() {
                axios.get(
                        'https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/result/cart.json')
                    .then((res) => {
                        this.products = res.data.data; //这里需要根据自己用的接口返回的数据来赋值
                        // console.log(res.data);

                    }).catch((err) => {
                        console.log(err); //这里应使用箭头函数，this才能指向vm实例
                    });
            }
        }
    });
</script>

</html>