vue如何实现简单的购物车功能

2023-07-02 14:07:54 636人浏览安东尼

摘要

这篇文章主要介绍“Vue如何实现简单的购物车功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue如何实现简单的购物车功能”文章能帮助大家解决问题。1.实现效果：2.涉及到的知识点：toFixed

这篇文章主要介绍“Vue如何实现简单的购物车功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue如何实现简单的购物车功能”文章能帮助大家解决问题。

1.实现效果：

vue如何实现简单的购物车功能

2.涉及到的知识点：

toFixed函数、过滤器、reduce高阶函数、v-bind:disabled、v-if

3.代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta Http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>书籍购物车案例</title>    <style>        table {            border: 1px solid #e9e9e9;            border-collapse: collapse;            border-spacing: 0;        }        th, td {            padding: 8px 16px;            border: 1px solid #e9e9e9;            text-align: left;        }        th {            background-color: #f7f7f7;            color: #5c6b77;            font-weight:600;        }    </style></head><body>    <div id="app">        <div v-if="books.length">        <table>            <thead>                <tr>                    <th></th>                    <th>书籍名称</th>                    <th>出版日期</th>                    <th>价格</th>                    <th>购买数量</th>                    <th>操作</th>                </tr>            </thead>            <tbody>                <tr v-for="(item,index) in books">                    <td>{{item.id}}</td>                    <td>{{item.name}}</td>                    <td>{{item.date}}</td>                    <td>￥{{item.price | finalPrice}}</td>                    <td>                        <button @click="item.count--" :disabled="item.count <=1">-</button>                        {{item.count}}                        <button @click="item.count++">+</button>                    </td>                    <td><button @click="btndelete(index)">移除</button></td>                </tr>            </tbody>        </table>        <h3>总价格：{{sumPrice | finalPrice}}</h3>    </div>    <div v-else><h3>购物车为空</h3></div>    </div>    <script src="../../js/vue.js"></script>    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->    <script>        const app = new Vue({            el: '#app',            data: {                books: [                    {                        id: 1,                        name: '《算法导论》',                        date: '2006-9',                        price: 85.00,                        count:1                    },                    {                        id: 2,                        name: '《算法导论》',                        date: '2006-9',                        price: 85.00,                        count:1                    },                    {                        id: 3,                        name: '《算法导论》',                        date: '2006-9',                        price: 85.00,                        count:1                    },                    {                        id: 4,                        name: '《算法导论》',                        date: '2006-9',                        price: 85.00,                        count:1                    },                    {                        id: 5,                        name: '《算法导论》',                        date: '2006-9',                        price: 85.00,                        count:1                    }                 ]            },            methods: {                btndelete(index){                    this.books.splice(index,1);                }            },            filters: {                finalPrice(price){                    return '￥' + price.toFixed(2);                }            },            computed: {                sumPrice(){                    // 计算价格法1：                    // let sum = 0;                    // for(let book of this.books) {                    //     sum += book.price * book.count;                    // }                    // return  sum;                    // 计算价格法2,使用reduce函数。                    return this.books.reduce(((preValue,book)=>preValue + book.count * book.price),0);                }            }        })    </script></body></html>

关于“vue如何实现简单的购物车功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue如何实现简单的购物车功能

本文链接: https://www.lsjlt.com/news/342608.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341