vue实现购物车案例


Posted in Javascript onMay 30, 2020

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>购物车案例</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
 *{
 padding: 0;
 margin:0
 }
 ul li{
 width: 1200px;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 li div,.total{
 display: inline-block;
 width:200px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 }
 button{
 width: 60px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 }

</style>
<body>

 <div id="app">
 <ul>
  <goodsitem 
  v-for="item in goodslist" 
  :item="item" 
  :key="item.id"
  @onchange="(type)=>{handleCount(type,item)}"
  @ondelete="()=>{handleDelete(item.id)}">
  </goodsitem>
  <div class="total" style="padding-left: 113px">总价:{{total}}</div>
 </ul>
 </div>

</body>
<script>
 var computed={
 props:{
  count:{
   type:Number,
   require:true
  }
 },
 methods:{
  handleCount(type){
  this.$emit('onchange',type)
  }
 },
 template:`<div style="width:200px">
   <button @click="handleCount('sub')">-</button>
   <span>{{count}}</span>
   <button @click="handleCount('add')" >+</button>
   </div>
 
 `
 
 }
 var goodsitem={
 props:{
  item:{
  type:Object,
  require:true
  }
 },
 methods:{
  handleCount(type){
  this.$emit('onchange',type)
  },
  handleDelete(){
  this.$emit('ondelete')
  }
 },
 components:{
  computed
 },
 template:`<li>
   <div>{{item.goodsName}}</div>
   <div>{{item.price}}</div>
   <computed :count="item.count" @onchange="handleCount"></computed>
   <div>{{item.sum}}</div>
   <div><button @click="handleDelete">删除</button></div>
   </li>
   `
 }

 var app=new Vue({
 el:"#app",
 data:{
  goodslist:[{
  id:1,
  goodsName:"小可爱",
  price:100,
  count:1,
  sum:100
  },{
  id:2,
  goodsName:"小可爱",
  price:200,
  count:2,
  sum:400
  },{
  id:3,
  goodsName:"小可爱",
  price:300,
  count:3,
  sum:900
  },{
  id:4,
  goodsName:"小可爱",
  price:400,
  count:1,
  sum:400
  },
  ]
 },
 methods:{
  handleCount(type,item){
  if(type=='add'){
   item.count+=1
  }else{
   if(item.count==1){
   this.handleDelete(item.id) 
   return
   }
   item.count-=1
  }
  item.sum=item.count*item.price
  },
  handleDelete(id){
  return this.goodslist=this.goodslist.filter((item)=>{
   return id!=item.id
  })
  }
 },
 computed:{
  total(){
  return this.goodslist.reduce((total,item)=>{
   return total+=item.sum
  },0)
  }
 },
 components:{
  goodsitem
 }
 })
</script>
</html>

实现效果图:

vue实现购物车案例

小编再为大家分享一段收藏的vue购物车逻辑代码,也谢谢原作者的分享

<template>
 <div class="hello">
 <div class="main">
 <div v-if="hasList">
  <div class="cart-box">
   <div class="cart-list" v-for="(item,index) in carts" :key="index">
    <!-- <icon v-if="item.selected" type="success" color="red" data-index="index" class="cart-pro-select" @click="selectList"/>
    <icon v-else type="circle" class="cart-pro-select" data-index="index" @click="selectList"/> -->
    <router-link to="/"><img class="cart-thumb" :src="item.image" /></router-link>
    <p class="cart-pro-name">{{item.title}}</p>
    <p class="cart-pro-price">¥{{item.price}}</p>
    <div class="cart-count-box">
     <p class="cart-count-down" @click="minusCount(item.id)" data-obj="obj" data-index="index">-</p>
     <p class="cart-count-num">{{item.num}}</p>
     <p class="cart-count-add" @click="addCount(item.id)" data-index="index">+</p>
    </div>
    <p class="cart-del" @click="deleteList" data-index="index">×</p>
   </div>
  </div>
 
  <div class="cart-footer">
   <!-- <icon v-if="selectAllStatus" type="success_circle" color="#fff" class="total-select" @click="selectAll"/>
   <icon v-else type="circle" color="#fff" class="total-select" @click="selectAll"/> -->
   <div class="order-icon">
    <router-link to="/"><img src="../../static/image/icon3.png" /></router-link>
   </div>
   <p>全选</p>
   <p class="cart-toatl-price">¥{{totalPrice}}</p>
  </div>
 </div>
 <div v-else>
  <div class="cart-no-data">购物车是空的哦~</div>
 </div>
</div>
 </div>
</template>
<script>
 
// import {Toast} from 'vant'
export default {
 data () {
 return {
  carts: [{id: 1, title: '新鲜芹菜 半斤', image: '../../static/image/s5.png', num: 4, price: 0.01, selected: true},
  {id: 2, title: '素米 500g', image: '../../static/image/s6.png', num: 1, price: 0.03, selected: true}],
  hasList: true,
  totalPrice: 0,
  selectAllStatus: true,
  obj: {
  name: 'hello'
  }
 }
 },
 created () {
 // this.$set({
 // hasList: true,
 // carts: [
 //  {id: 1, title: '新鲜芹菜 半斤', image: '../../static/image/s5.png', num: 4, price: 0.01, selected: true},
 //  {id: 2, title: '素米 500g', image: '../../static/image/s6.png', num: 1, price: 0.03, selected: true}
 // ]
 // })
 this.getTotalPrice()
 },
 methods: {
 selectList (e) {
  console.log(e)
  let carts = this.carts
  let index = 1
  const selected = carts[index].selected
  carts[index].selected = !selected
  this.setData({
  carts: carts
  })
  this.getTotalPrice()
 },
 deleteList (e) {
  const index = e.currentTarget.dataset.index
  let carts = this.carts
  carts.splice(index, 1)
  this.$set({
  carts: carts
  })
  if (!carts.length) {
  this.$set({
   hasList: false
  })
  } else {
  this.getTotalPrice()
  }
 },
 selectAll (e) {
  let selectAllStatus = this.data.selectAllStatus
  selectAllStatus = !selectAllStatus
  let carts = this.carts
 
  for (let i = 0; i < carts.length; i++) {
  carts[i].selected = selectAllStatus
  }
  this.$set({
  selectAllStatus: selectAllStatus,
  carts: carts
  })
  this.getTotalPrice()
 },
 addCount (e) {
  let carts = this.carts
  let num = carts[e - 1].num
  num = num + 1
  carts[e - 1].num = num
  this.$set(this.carts, carts)
  this.getTotalPrice()
 },
 minusCount (e) {
  // const obj = e.currentTarget.dataset.obj
  let carts = this.carts
  let num = carts[e - 1].num
  if (num <= 1) {
  return false
  }
  num = num - 1
  carts[e - 1].num = num
  this.$set(this.carts, carts)
  this.getTotalPrice()
 },
 getTotalPrice () {
  let carts = this.carts
  let total = 0
  for (let i = 0; i < carts.length; i++) {
  if (carts[i].selected) {
   total += carts[i].num * carts[i].price
  }
  }
  this.$set({
  carts: carts,
  totalPrice: total.toFixed(2)
  })
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- scoped css样式仅仅在当前模板使用-->
<style scoped>
.cart-box{
 padding-bottom: 50px;
}
.cart-list{
 position: relative;
 padding: 10px 10px 10px 142px;
 height: 92px;
 border-bottom: 1px solid #e9e9e9;
}
.cart-list .cart-pro-select{
 position: absolute;
 left: 10px;
 top: 45px;
 width: 25px;
 height: 25px;
}
 
.cart-list .cart-thumb{
 position: absolute;
 top: 10px;
 left: 42px;
 width: 92px;
 height: 92px;
}
.cart-list .cart-pro-name{
 display: inline-block;
 width: 150px;
 height: 52px;
 line-height: 25px;
 overflow: hidden;
}
.cart-list .cart-pro-price{
 display: inline-block;
 float: right;
 height: 52px;
 line-height: 25px;
}
.cart-list .cart-count-box{
 position: absolute;
 left: 142px;
 bottom: 10px;
 width: 125px;
 height: 40px;
}
.cart-list .cart-count-box p{
 display: inline-block;
 line-height: 40px;
 p-align: center;
}
.cart-count-down,.cart-count-add{
 position: absolute;
 top:-5px;
 font-size: 22px;
 width: 25px;
 height: 100%;
}
.cart-count-num{
 margin-left: 17px;
 width: 75px;
}
.cart-del{
 position: absolute;
 right: 10px;
 bottom: 0px;
 width: 40px;
 height: 40px;
 line-height: 40px;
 p-align: center;
 font-size: 22px;
}
.cart-footer{
 position: fixed;
 bottom: 15%;
 left: 0;
 width: 100%;
 height: 45px;
 line-height: 45px;
 box-sizing: border-box;
 background: #AB956D;
 color: #fff;
}
.total-select{
 position: absolute;
 left: 10px;
 top: 12px;
 width: 22px;
 height: 22px;
}
.order-icon{
 position: absolute;
 right: 20px;
 top: 12px;
 width: 24px;
 height: 24px;
}
.order-icon image,.order-icon navigator{
 display: block;
 width: 24px;
 height: 24px;
}
.cart-toatl-price{
 float: right;
 width: 60px;
}
 
.cart-no-data{
 padding:20px 0;
 color: #999;
 p-align: center;
}
</style>

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
js实现模糊匹配功能
Feb 15 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
vue.js实现简单购物车功能
May 30 #Javascript
vue实现简单学生信息管理
May 30 #Javascript
vue实现学生信息管理系统
May 30 #Javascript
vue实现在线学生录入系统
May 30 #Javascript
VueJS实现用户管理系统
May 29 #Javascript
如何在vue中使用jointjs过程解析
May 29 #Javascript
vue实现信息管理系统
May 30 #Javascript
You might like
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python 生成器协程运算实例
2017/09/04 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
什么是Smart Navigation?
2016/07/03 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
学习两会精神心得范文
2014/03/17 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2015年考研复习计划
2015/01/19 职场文书
红歌会主持词
2015/07/02 职场文书
聘任通知书
2015/09/21 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL