Html|Vue实战小项目-购物车

简介: Html|Vue实战小项目-购物车

前言

在很多电商网站中,都有一个非常重要的功能,那就是购物车。接下来将使用Vue.js实现一个简易的购物车项目。实现的功能有全选或选择部分商品、计算总价、对商品数量进行增减、删除已添加至购物车的商品。

步骤

首先新建一个html文件,进行引入Vue.jshtml代码编写,效果图如上。

一、单个商品的价格计算

单个商品数量可以增减,但最少数量为1,而且数量的变化也会引起价格的变化。数量的变化通过点击+或-去调用add或reduce方法,+的时候数量加1,-的时候数量减1,并且在单个商品金额的地方调用计算单个商品总结的方法。

reduce: function (index) {  //减少商品

this.list[index].count --;

},

add: function (index) { //增加商品

this.list[index].count ++;

},

ofPrice: function (index) { //计算单个商品总价

  let ofPrice = 0;

ofPrice+=(this.list[index].price*this.list[index].count);

   return ofPrice.toString();

}

二、选择商品

在购物车里,可以选择想要结算的商品进行最后价格结算,商品总金额为已选择的商品的金额之和。需要绑定单选按钮的选中状态,选中为true,再次点击状态取反。

<td> // 单选商品

<input type="checkbox" :checked="item.check" @click="item.check = !item.check">

</td>

<th>全选<input id="all" @click="selAll" type="checkbox" checked></th>

selAll: function () {   //商品全选

let isAll = document.querySelector('#all');

if (isAll.checked == true) {

this.list.forEach(function(item, index) {

item.check = true;

})

} else {

this.list.forEach(function(item, index) {

item.check = false;

})

}

},

上面是商品的选择,还需要计算已选择商品的价格之和。

totalPrices: function () {  //计算总价

let totalPrices = 0;

this.list.forEach(function (val, index) {

if (val.check == true) //遍历商品,如果选中就进行计算。

totalPrices += parseFloat(val.price * val.count);

})

return totalPrices.toString();

},

三、删除商品

点击每个商品后的移除后就会将该商品从商品列表中删除

remove: function (index) {  //移除商品

    this.list.splice(index, 1);

},

四、完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app" v-cloak>

    <template v-if="list.length">

        <table>

            <thead>

            <tr>

                <th>全选<input id="all" @click="selAll" type="checkbox" checked></th>

                <th>商品名称</th>

                <th>商品单价</th>

                <th>购买数量</th>

                <th>金额(元)</th>

                <th>操作</th>

            </tr>

            </thead>

            <tbody>

            <template v-for="(item, index) in list">

                <tr>

                    <td>

                        <input type="checkbox" :checked="item.check" @click="item.check = !item.check">

                    </td>

                    <td>

                        {{ item.name }}

                    </td>

                    <td>

                        {{ item.price }}

                    </td>

                    <td>

                        <button @click="reduce(index)" :disabled="item.count == 1">-</button>

                        {{ item.count }}

                        <button @click="add(index)">+</button>

                    </td>

                    <td>

                        {{ ofPrice(index) }}

                    </td>

                    <td>

                        <button @click="remove(index)">移除</button>

                    </td>

                </tr>

            </template>

            </tbody>

        </table>

        <div>总价: ¥ {{ totalPrices }}</div>

    </template>

    <template v-else>

        购物车没有商品

    </template>

</div>

<script src="../js/vue.js"></script>

<script>

    var app = new Vue({

        el: '#app',

        data: {

            list: [

                {

                    id: 1,

                    name: '矿泉水',

                    price: 2,

                    count: 1,

                    check: true,

                },

                {

                    id: 2,

                    name: '口香糖',

                    price: 2.5,

                    count: 1,

                    check: false,

                },

                {

                    id: 3,

                    name: '可乐',

                    price: 3,

                    count: 1,

                    check: true,

                },

            ]

        },

        methods: {

            remove: function (index) {  //移除商品

                this.list.splice(index, 1);

            },

            reduce: function (index) {  //减少商品

                this.list[index].count --;

            },

            add: function (index) { //增加商品

                this.list[index].count ++;

            },

            selAll: function () {   //商品全选

                let isAll = document.querySelector('#all');

                if (isAll.checked == true) {

                    this.list.forEach(function(item, index) {

                        item.check = true;

                    })

                } else {

                    this.list.forEach(function(item, index) {

                        item.check = false;

                    })

                }

            },

            ofPrice: function (index) { //计算单个商品总价

                let ofPrice = 0;

                ofPrice += (this.list[index].price * this.list[index].count);

                return ofPrice.toString();

            }

        },

        computed: {

            totalPrices: function () {  //计算总价

                let totalPrices = 0;

                this.list.forEach(function (val, index) {

                    if (val.check == true)

                        totalPrices += parseFloat(val.price * val.count);

                })

                return totalPrices.toString();

            },

        }

    })

</script>

</body>

</html>

目录
相关文章
|
11天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
1月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
83 2
vue.js项目评估流程图特效
|
1月前
|
JavaScript 前端开发 测试技术
在Vue项目中,常见的错误类型有哪些?
在Vue项目中,常见的错误类型有哪些?
25 2
|
1月前
|
JavaScript 安全 中间件
在Vue项目中,什么情况下需要使用错误处理机制?
在Vue项目中,什么情况下需要使用错误处理机制?
18 2
|
1月前
|
运维 监控 JavaScript
分享一些 Vue 项目中的最佳实践和经验教训。
分享一些 Vue 项目中的最佳实践和经验教训。
19 2
|
1月前
|
JavaScript
vue-cli创建vue3+ts项目
vue-cli创建vue3+ts项目
37 0
|
11天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
13 0
|
30天前
|
JavaScript 前端开发 网络架构
Vue3项目中使用vue-router
Vue3项目中使用vue-router
41 0
|
2天前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
6 0
|
2天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
6 0