Vue.js实现简易购物车功能

2021-05-24 22:59发布

1.购物车画面展示:

2.购物车需要实现的功能:

(1)修改数量以及移除书籍后总价会发生改变;

(2)当一本书籍都没有的时候提示购物车为空,表格消失。

3.逻辑分析:

(1)由于加入购物车的每一行内容都类似,可以用v-for指令将书籍进行遍历添加;

(2)点击加减按钮以及移除按钮总价变化,可以用v-on指令给按钮添加点击事件;

(3)当购物车为空时表格消失,可以用v-show指令的boolean值设为false进行隐藏;

(4)移除功能可以用数组.splice(元素下标,删除的数量)实现

(5)计算总价可以用Vue.js的计算属性computed:{}实现

4.代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="js/vue.js"></script>
   <style>
       table {
           margin: 0px auto;
           text-align: center;
       }
   </style>
</head>

<body>
   <div id="cart">
       <div v-show="goodsList.length==0">购物车为空</div>
       <table width="700px" border="1px" cellspacing="0px" cellpadding="3px" v-show="goodsList.length>0">
           <tr>
               <th>编号</th>
               <th>书籍名称</th>
               <th>出版日期</th>
               <th>价格</th>
               <th>购买数量</th>
               <th>操作</th>
           </tr>
           <tr v-for="(goods, index) in goodsList">
               <td>{{index+1}}</td>
               <td>{{goods.name}}</td>
               <td>{{goods.date}}</td>
               <td>{{goods.price|aaa}}</td>
               <td><button @click="goods.count>1?goods.count--:goods.count">-</button>{{goods.count}}<button @click="goods.count++">+</button></td>
               <td><button @click="remove(index)">移除</button></td>
           </tr>
           <tr style="text-align: left;">
               <td colspan="6">总价:{{totalMoney|aaa}}</td>
           </tr>
       </table>
   </div>
</body>

<script>
   // 实例化Vue对象
   const v = new Vue({
       el: "#cart",
       data: {
           goodsList: [
               { name: "《算法导论》", date: "2006-09", price: 85, count: 1 },
               { name: "《UNIX编程艺术》", date: "2006-02", price: 59, count: 1 },
               { name: "《编程珠玑》", date: "2008-10", price: 39, count: 1 },
               { name: "《代码大全》", date: "2006-03", price: 128, count: 1 }
           ]
       },
       methods: {
           //根据数组的索引移除书籍
           remove(index){
               this.goodsList.splice(index,1);
           }
       },
       //vue.js的计算属性
       computed: {
           totalMoney() {
               let sum = 0;
               for (let goods of this.goodsList) {
                   sum = sum + goods.price * goods.count;
               }
               return sum;
           }
       },
       //vue.js的过滤器,把价格统一格式化
       filters:{
           // 格式:{{totalMoney|aaa}}
           // 此时 value 指的是totalMoney
           //.toFixed(2):保留两位小数
           aaa(value){  
               return "¥"+value.toFixed(2);
           }
       }
   })
</script>

</html>

5.测试:

(1)点击购买数量按钮,计算总价功能:

(2)移除书籍后总价发送改变:

(3)购物车书籍全部移除后提示购物车为空,隐藏表格: