首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实战教程》

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

vue实现购物车案例

- Author -

若星@

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript生成随机颜色示例代码
May 05 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
vue组件间通信六种方式（总结篇）
May 15 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
动态代理(1) 逻辑函数(1) element-ui(1) 数据合并(1) 模板引擎(1) 复合索引(1) 连接查询(1) Carbon(1) BufferPool(1) pongo2(1)
You might like
php抓取页面与代码解析 推荐
2010/07/23 PHP
php中fsockopen用法实例
2015/01/05 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
基于javascript实现彩票随机数生成（简单版）
2020/04/17 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
微信公众平台开发教程（六）获取个性二维码的实例
2016/12/02 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
python复制与引用用法分析
2015/04/08 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python如何修改装饰器中参数
2018/03/20 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
向全球直邮输送天然健康产品：iHerb.com
2020/05/03 全球购物
诚信承诺书范文
2014/03/27 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
亲情作文之母爱
2019/09/25 职场文书
护士年终工作总结不会写？各科护士模板总结
2020/01/02 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
go 实现简易端口扫描的示例
2021/05/22 Golang