Vue.js购物车示例

文章目录

  • 购物车示例效果
  • 准备
  • 代码
  • 参考文献

购物车示例效果

Vue.js购物车示例_第1张图片

准备

  • Vue.js v2.6.10
  • 开发版本:https://cn.vuejs.org/js/vue.js
  • 生产版本:https://cn.vuejs.org/js/vue.min.js

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车示例title>
    <script src="/js/vue.min.js">script>
    <style>
        [v-cloak] {
            display: none;
        }

        table {
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }

        th, td {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }

        th {
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
            white-space: nowrap;
        }
    style>
head>
<body>
<div id="app" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
            <tr>
                <th>选择<input type="checkbox" v-model="isCheckedAll" @change="handleCheckAll">th>
                <th>th>
                <th>商品名称th>
                <th>商品单价th>
                <th>购买数量th>
                <th>操作th>
            tr>
            thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <td><input type="checkbox" v-model="item.isChecked">td>
                <td>{{index+1}}td>
                <td>{{item.name}}td>
                <td>{{item.price}}td>
                <td>
                    {{item.count}}
                td>
                <td>
                    <button @click="handleReduce(index)" :disabled="item.count === 1">-button>
                    <button @click="handleAdd(index)">+button>
                    <button @click="handleRemove(index)">移除button>
                td>
            tr>
            tbody>
        table>
        <div>总价:¥{{totalPrice}}div>
    template>
    <div v-else>购物车为空div>
div>
body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isCheckedAll: false,
            list: [
                {
                    id: 1,
                    name: 'iPhone 7',
                    price: 6188,
                    count: 1,
                    isChecked: true
                },
                {
                    id: 2,
                    name: 'iPad Pro',
                    price: 5888,
                    count: 1,
                    isChecked: true
                },
                {
                    id: 3,
                    name: 'MackBook Pro',
                    price: 21488,
                    count: 1,
                    isChecked: true
                }
            ]
        },
        computed: {
            totalPrice: function () {
                var isAll = true;
                var total = 0;
                for (var i = 0; i < this.list.length; i++) {
                    var item = this.list[i];
                    if (!item.isChecked) {
                        isAll = false;
                        continue;
                    }
                    total += item.price * item.count;
                }
                this.isCheckedAll = isAll;
                return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
            }
        },
        methods: {
            handleReduce: function (index) {
                if(!this.list[index].isChecked){
                    this.list[index].isChecked = true;
                }
                if (this.list[index].count === 1)
                    return;
                this.list[index].count--;
            },
            handleAdd: function (index) {
                if(!this.list[index].isChecked){
                    this.list[index].isChecked = true;
                }
                this.list[index].count++;
            },
            handleRemove: function (index) {
                this.list.splice(index, 1);
            },
            handleCheckAll: function () {
                if (this.isCheckedAll) {
                    for (var i in this.list) {
                        var item = this.list[i];
                        item.isChecked = true;
                    }
                } else {
                    for (var i in this.list) {
                        var item = this.list[i];
                        item.isChecked = false;
                    }
                }
            }
        },
        created: function () {
            var isAll = true;
            for (var i = 0; i < this.list.length; i++) {
                var item = this.list[i];
                var _isChecked = item.isChecked;
                if (!_isChecked) {
                    isAll = false;
                }
            }
            if (isAll) {
                this.isCheckedAll = true;
            }
        }
    });
script>
html>

参考文献

[1] 官网[DB_OL]. https://cn.vuejs.org/v2/guide/
[1] 梁, Vue.js实战[M]. 清华大学出版社, 2017-10-01

你可能感兴趣的:(前端)