您的位置：首页 > 编程技术 > js  >  vue实现购物车案例

vue实现购物车案例

 更新时间：2020年5月29日 20:21  点击：1690

本文实例为大家分享了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>

实现效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • ASP.NET购物车实现过程详解

    这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22

  • Vue基于localStorage存储信息代码实例

    这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16

  • vue中activated的用法

    这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2021-01-03

  • vue 监听 Treeselect 选择项的改变操作

    这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-23

  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17

  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-06

  • vue treeselect获取当前选中项的label实例

    这篇文章主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28

  • vue 获取到数据但却渲染不到页面上的解决方法

    这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19

  • Vue中slot-scope的深入理解（适合初学者）

    这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解，这个教程非常适合初学者,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-17

  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-09

  • Vue 列表页带参数进详情页的操作(router-link)

    这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13

  • vue+高德地图实现地图搜索及点击定位操作

    这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09

  • vue cli4.0项目引入typescript的方法

    这篇文章主要介绍了vue cli4.0项目引入typescript的方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17

  • vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-30

  • Vue 3.0中jsx语法的使用

    这篇文章主要介绍了Vue 3.0 中 jsx 语法使用，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下...2020-11-13

  • vue3如何按需加载第三方组件库详解

    距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02

  • vue项目多环境配置(.env)的实现

    最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下...2021-07-20