Vue简易购物车实例

偷故事的鸭

已于 2022-03-25 20:59:31 修改

阅读量1.8k

点赞数 5

分类专栏： vue 文章标签： vue

于 2022-03-25 00:01:31 首次发布

本文链接：https://blog.csdn.net/m0_61174543/article/details/123724323

版权

vue 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

vue是前端轻量级MVVM框架，门槛相对较低，今天就用Vue做一个简易版本的购物车实例，我写的是vue2的形式，发表该文章以便记录

一.vue.js官网下载：安装 — Vue.js

二.这里我使用的是直接引入的一个vue.js

三.原理分析和实现

引入vue.js

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

实例源码

HTML部分

 <div id="app">
         <form action="#" method="post">
             <table border="1" style="width: 450px;text-align: center">
                 <tr>
                     <td style="width: 8%">
                         <input type="checkbox" v-model="isChecked">
                     </td>
                     <td style="width: 30%">产品名称</td>
                     <td style="width: 20%">产品单价</td>
                     <td style="width: 20%">产品数量</td>
                     <td style="width: 30%">金额</td>
                 </tr>
                 <tr v-for="(item,index) in lists " :key="index">
                     <td>
                         <input type="checkbox" v-model="item.isCheck">
                     </td>
                     <td>{{item.name}}</td>
                     <td >{{item.price}}</td>
                     <td>
                         <input type="number" min="0"  v-model="item.num" style="width: 40px">
                     </td>
                 <td style="color: red;font-weight: bold">
                     ￥{{(item.price*item.num).toFixed(2)}}
                 </td>
                 </tr>
                 <tr>
                     <td colspan="5" style="text-align: left;color: red;font-weight: bold ;text-align: center" >
                         总价:    ￥{{getTotal }}
                     </td>
                 </tr>

             </table>
         </form>
     </div>

准备下列数据

lists:[
                         {
                             isCheck:false,
                             name:"钢笔",
                             price:2.52,
                             num:2
                         },
                         {
                             isCheck:false,
                             name:"毛笔",
                             price:3.5,
                             num:0
                         },
                         {
                             isCheck:false,
                             name:"雨伞",
                             price:15.6,
                             num:1
                         },
                         {
                             isCheck:false,
                             name:"辣条",
                             price:0.5,
                             num:0
                         },
                         {
                             isCheck:false,
                             name:"宋轶的签名照",
                             price:200,
                             num:2
                         }
                      ]

完整实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偷故事的鸭</title>
  <script src="js/vue.js"></script>
</head>
<body>

     <div id="app">
         <form action="#" method="post">
             <table border="1" style="width: 450px;text-align: center">
                 <tr>
                     <td style="width: 8%">
                         <input type="checkbox" v-model="isChecked">
                     </td>
                     <td style="width: 30%">产品名称</td>
                     <td style="width: 20%">产品单价</td>
                     <td style="width: 20%">产品数量</td>
                     <td style="width: 30%">金额</td>
                 </tr>
                 <tr v-for="(item,index) in lists " :key="index">
                     <td>
                         <input type="checkbox" v-model="item.isCheck">
                     </td>
                     <td>{{item.name}}</td>
                     <td >{{item.price}}</td>
                     <td>
                         <input type="number" min="0"  v-model="item.num" style="width: 40px">
                     </td>
                 <td style="color: red;font-weight: bold">
                     ￥{{(item.price*item.num).toFixed(2)}}
                 </td>
                 </tr>
                 <tr>
                     <td colspan="5" style="text-align: left;color: red;font-weight: bold ;text-align: center" >
                         总价:    ￥{{getTotal }}
                     </td>
                 </tr>

             </table>
         </form>
     </div>

     <script>
         const  vm=new  Vue({
             el:"#app",
             data(){
                 return{
                     lists:[
                         {
                             isCheck:false,
                             name:"钢笔",
                             price:2.52,
                             num:2
                         },
                         {
                             isCheck:false,
                             name:"毛笔",
                             price:3.5,
                             num:0
                         },
                         {
                             isCheck:false,
                             name:"雨伞",
                             price:15.6,
                             num:1
                         },
                         {
                             isCheck:false,
                             name:"辣条",
                             price:0.5,
                             num:0
                         },
                         {
                             isCheck:false,
                             name:"宋轶的签名照",
                             price:200,
                             num:2
                         }
                      ]
                 }
             },
             computed:{
                 //计算总价格
                 getTotal(){
                    // 获取lists中isCheck为true的数据
                     let _listsCheck=this.lists.filter(function (val){
                         return val.isCheck===true;
                     })
                     //总价
                     let totalPrice=0

                     for (let i = 0; i < _listsCheck.length; i++) {  //循环获取lists中isCheck为true的数据
                         totalPrice+=_listsCheck[i].num*_listsCheck[i].price//将对应isCheck为true的数量与价格相乘得出总价
                     }
                     return totalPrice.toFixed(2);  //总价保留2为小数
                 },
                 isChecked:{
                     get(){
                         let flag=true;
                         //读取的时候触发
                         this.lists.forEach(el=>{  //迭代lists中为isCheck
                             if(el.isCheck==false){  //当子选项有一个为false时，则全选设置为false
                                 flag=false;
                             }
                         })
                         return flag;
                     },
                     set(val) //当isChecked被赋值的时候会触发这个set方法
                     {
                         if(val) //判断如果全选被选中，则其他的子选项全部选中，如果全选被取消，则其他的所有子选项取消选中
                         {
                             this.lists.map(el=>el.isCheck=true);
                         }else
                         {
                             this.lists.map(el=>el.isCheck=false);
                         }
                     }
                 }
             }
         })
     </script>
</body>
</html>

效果图：

偷故事的鸭

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue简易购物车实例

vue是前端轻量级MVVM框架，门槛相对较低，今天就用Vue做一个简易版本的购物车实例，我写的是vue2的形式，发表该文章以便记录一.vue.js官网下载：安装 — Vue.js二.这里我使用的是直接引入的一个vue.js三.原理分析和实现引入vue.js<script src="js/vue.js"></script>实例源码HTML部分 <div id="app"> <form action="#" me..
复制链接

扫一扫