vue实现简单的购物车功能

本文实例为大家分享了vue实现简单购物车功能的具体代码,供大家参考,具体内容如下

1.实现效果:

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>         <h2>总价格:{{sumPrice | finalPrice}}</h2>     </div>     <div v-else><h2>购物车为空</h2></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>

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    2010年底DIY硬件总结和安装参考

    2010年底DIY硬件总结和安装参考,,它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天,但看看当年的内容是真的走了,如果

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个

    js用代码实现简单购物车

    js用代码实现简单购物车,,图: 选择所有按钮: 复制代码代码如下所示: 选择 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3