Vue实战-购物车案例

  • Vue实战-购物车案例已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

实现的功能:添加商品到购物车,计算总价PS:for循环的多种形式上面我们使用for (i in 数组/对象)的形式,在js中for循环常用的形式有四种


Vue实战-购物车案例

Vue实战-购物车案例

普通购物车

实现的功能:添加商品到购物车,计算总价

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>购物车</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>     <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <style>     th,td{         text-align: center;     } </style> <body> <div id="app">     <div class="container">         <div class="row">             <div class="col-md-8 col-md-offset-2">                 <h2 class="text-center">购物车案例</h2>                 <table class="table table-bordered table-hover">                     <!--表头-->                     <tr>                         <th>商品名称</th>                         <th>商品价格</th>                         <th>商品数量</th>                         <th>添加购物车</th>                     </tr>                     <!--表体-->                     <tr v-for="data in dataList">                         <td>{{data.name}}</td>                         <td>{{data.price}}</td>                         <td>{{data.number}}</td>                         <td><input type="checkbox" v-model="checkGroup" :value="data"></td>                     </tr>                 </table>                 <!--购物车选中状态 -->                 <hr>                 <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>                 <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>                 <!--计算总价-->                 <hr>                 总价:{{totalPrice()}}             </div>         </div>     </div> </div> </body>  <script>     var vm = new Vue({         el: '#app',         data: {             //商品数据             dataList: [                 {name: 'Python实战', price: 66, number: 2},                 {name: 'Linux实战', price: 55, number: 1},                 {name: 'Java实战', price: 77, number: 1},             ],             //购物车             checkGroup: [],         },         methods: {             //计算总价             totalPrice(){                 // 总价初始化                 var total = 0                 for (i in this.checkGroup){                     console.log(i) // i是索引                     total += this.checkGroup[i].price * this.checkGroup[i].number                 }                 return total             }         }     }) </script> </html> 

Vue实战-购物车案例

PS:for循环的多种形式

上面我们使用for (i in 数组/对象)的形式,在js中for循环常用的形式有四种

//方式一: i是索引,循环选中的商品,基于迭代的循环 for (i in this.checkGroup){                     console.log(i) // i是索引                     total += this.checkGroup[i].price * this.checkGroup[i].number  } 
// 方式二: 基于索引的循环,最普通的 for (var i=0;i<this.checkGroup.length;i++) { 	total += this.checkGroup[i].price * this.checkGroup[i].number 	} 
 //方式三: 基于迭代 for of (es6) for (v of this.checkGroup) { 	total += v.price * v.number  } 
 // 方式四:forEach  可迭代对象(数组)的方法,数组而言v是值,i是索引 this.checkGroup.forEach(function(v,i){   this.checkGroup.forEach((v,i)=>{     total += v.price * v.number                 }) 

进阶购物车

一键加入购物车功能实现

基于普通购物车实现功能:一键添加购物车功能

通过v-model双向绑定实现,input框绑定change事件, checkbox选中true反之false

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>购物车</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>     <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <style>     th,td{         text-align: center;     } </style> <body> <div id="app">     <div class="container">         <div class="row">             <div class="col-md-8 col-md-offset-2">                 <h2 class="text-center">购物车案例</h2>                 <table class="table table-bordered table-hover">                     <!--表头-->                     <tr>                         <th>商品名称</th>                         <th>商品价格</th>                         <th>商品数量</th>                         <!-- <th>添加购物车</th>-->                         <th>全选/取消全选&nbsp;<input type="checkbox" v-model="checkall" @change="handleAll"></th>                      </tr>                     <!--表体-->                     <tr v-for="data in dataList">                         <td>{{data.name}}</td>                         <td>{{data.price}}</td>                         <td>{{data.number}}</td>                         <td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>                     </tr>                 </table>                 <!--购物车选中状态 -->                 <hr>                 <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>                 <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>                 <!--计算总价-->                 <hr>                 <p style="font-size: 20px">总价:{{totalPrice()}}¥</p>                 <hr>                 <!--是否全选--> <!--                <p>是否全选: {{checkall}}</p>-->                 <div style="font-size: 20px">                     <p v-if="checkall === false">是否全选:否 ---  {{checkall}}</p>                     <p v-else-if="checkall === true">是否全选:是 ---  {{checkall}}</p>                 </div>              </div>         </div>     </div> </div> </body>  <script>     var vm = new Vue({         el: '#app',          data: {             //商品数据             dataList: [                 {name: 'Python实战', price: 66, number: 2},                 {name: 'Linux实战', price: 55, number: 1},                 {name: 'Java实战', price: 77, number: 1},              ],             //购物车             checkGroup: [],             //全选,默认不全选             checkall:false         },         methods: {             //计算总价             totalPrice(){                 // 总价初始化                 var total = 0                 for (i in this.checkGroup){                     console.log(i) // i是索引                     total += this.checkGroup[i].price * this.checkGroup[i].number                 }                 return total             },             //处理全选             handleAll(){                 if (this.checkall){                     //全选                     this.checkGroup = this.dataList                 }else {                     this.checkGroup=[]                 }             },             handleOne(){                 //全选                 if (this.checkGroup.length==this.dataList.length){                     this.checkall=true                 //不全选                 }else {                     this.checkall=false                 }             }         }     }) </script> </html> 

Vue实战-购物车案例

商品数量加减的实现

实现功能:通过添加+-样式来控制商品数量的加减

注意:这里暂时不考虑库存的情况,且减少商品数量做单独处理,解决减少数量小于1的情况

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>购物车</title>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>     <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <style>     th,td{         text-align: center;     } </style> <body> <div id="app">     <div class="container">         <div class="row">             <div class="col-md-8 col-md-offset-2">                 <h2 class="text-center">购物车案例</h2>                 <table class="table table-bordered table-hover">                     <!--表头-->                     <tr>                         <th>商品名称</th>                         <th>商品价格</th>                         <th>商品数量</th>                         <!-- <th>添加购物车</th>-->                         <th>全选/取消全选&nbsp;<input type="checkbox" v-model="checkall" @change="handleAll"></th>                      </tr>                     <!--表体-->                     <tr v-for="data in dataList">                         <td>{{data.name}}</td>                         <td>{{data.price}}</td>                         <td>                         <!-- 商品减少 -->                             <button @click="handleCount(data)">-</button>                             {{data.number}}                         <!-- 商品增加 -->                             <button @click="data.number++">+</button>                         </td>                         <td><input type="checkbox" v-model="checkGroup" :value="data" @change="handleOne"></td>                     </tr>                 </table>                 <!--购物车选中状态 -->                 <hr>                 <p v-if="checkGroup.length>0">购物车:{{checkGroup}}</p>                 <p v-else="checkGroup.length>0" style="font-size: 20px">购物车:购物车为空</p>                 <!--计算总价-->                 <hr>                 <p style="font-size: 20px">总价:{{totalPrice()}}¥</p>                 <hr>                 <!--是否全选--> <!--                <p>是否全选: {{checkall}}</p>-->                 <div style="font-size: 20px">                     <p v-if="checkall === false">是否全选:否 ---  {{checkall}}</p>                     <p v-else-if="checkall === true">是否全选:是 ---  {{checkall}}</p>                 </div>              </div>         </div>     </div> </div> </body>  <script>     var vm = new Vue({         el: '#app',          data: {             //商品数据             dataList: [                 {name: 'Python实战', price: 66, number: 2},                 {name: 'Linux实战', price: 55, number: 1},                 {name: 'Java实战', price: 77, number: 1},              ],             //购物车             checkGroup: [],             //全选,默认不全选             checkall:false         },         methods: {             //计算总价             totalPrice(){                 // 总价初始化                 var total = 0                 for (i in this.checkGroup){                     console.log(i) // i是索引                     total += this.checkGroup[i].price * this.checkGroup[i].number                 }                 return total             },             //处理全选             handleAll(){                 if (this.checkall){                     //全选                     this.checkGroup = this.dataList                 }else {                     this.checkGroup=[]                 }             },             handleOne(){                 //全选                 if (this.checkGroup.length==this.dataList.length){                     this.checkall=true                 //不全选                 }else {                     this.checkall=false                 }             },             //商品减少             handleCount(data){                 if (data.number<=1){                     alert('不能再少了')                 }                 else {                     data.number--                 }             }         }     }) </script> </html> 

Vue实战-购物车案例

不足:下面的提示信息可以隐藏,个人只是为了提示,商品删除没有写自行实现


如有错误请指正感谢~