<!DOCTYPE html>

<html lang="zh">

<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>

</head>

<body>

        <div id="app">

                <table>

                       <thead>

                                   <tr>

                                       <th>序号</th>

                                       <th>商品名称</th>

                                       <th>商品单价</th>

                                       <th>购买数量</th>

                                       <th>操作</th>

                                   </tr>

                       </thead>

                       <tbody>

                               <tr v-for="(item,index) in list">

                                     <td>{{index+1}}</td>

                                     <td>{{item.name}}</td>

                                     <td>{{item.price}}</td>

                                     <td>

                                          <button @click="handleReduce(index)" :disabled="item.count===1">-</button>

                                          {{item.count}}

                                          <button @click="handleAdd(index)">+</button>

                                     </td>

                                     <td>

                                            <button @click="handleRemove(index)">移除</button>

                                     </td>

                               </tr>

                       </tbody>

                </table>

                <div>总价：{{totalPrice}}</div>

                <!-- <div v-else>购物车为空</div> -->

        </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

        var vue=new Vue({

            el:"#app",

            data:{

                list:[

                {

                    id:1,

                    name:'iphone 7',

                    price:6188,

                    count:1

                },

                {

                    id:2,

                    name:'iphone 8',

                    price:7188,

                    count:1

                },

                {

                    id:3,

                    name:'iphone X',

                    price:8188,

                    count:1

                }],

            },

            methods:{

                handleReduce:function(index){

                    if(this.list[index].count===1) return;

                    this.list[index].count--;

                },

                handleAdd:function(index){

                    this.list[index].count++;

                },

                handleRemove:function(index){

                    this.list.splice(index,1);

                }

            },

            computed:{

                totalPrice:function(){

                    var total=0;

                    for(var i=0,len=this.list.length;i<len;i++){

                        total+=this.list[i].price*this.list[i].count;

                    }

                    return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');

                }

            }

        });

</script>

</html>

vue实现简单的购物车功能的更多相关文章

  1. vue实现淘宝购物车功能

    淘宝购物车功能,效果如下图 非常简单的逻辑,没有做代码的封装,代码如下 <div class="list-container"> <div class=" ...

  2. jQuery使用cookie与json简单实现购物车功能

    本文实例讲述了jQuery使用cookie与json简单实现购物车的方法.分享给大家供大家参考,具体如下: 1.生成一个cookie 用来存储商品的id  String类型 2.添加商品id的时候 把 ...

  3. 利用Vue实现一个简单的购物车功能

    开始学习Vue的小白,dalao多多指正 想要实现下面这个界面,包含总价计算.数量增加和移除功能 话不多说代码如下 <!DOCTYPE html> <html> <hea ...

  4. vuex——做简单的购物车功能

    购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listb ...

  5. Python入门之实现简单的购物车功能

    Talk is cheap,Let's do this! product_list = [ ['Iphone7 Plus', 6500], ['Iphone8 ', 8200], ['MacBook ...

  6. vue2.0实现购物车功能

    购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...

  7. vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  8. vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  9. vue实战记录（六）- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

随机推荐

  1. Tomcat部署工程需注意的三点

    Tomcat部署工程需注意: 1.如果该服务器是第一安装Tomcat,则各位大人应将该Tomcat的解压文件夹 backup 一份,已被不时之用.2.部署时应当注意修改Tomcat安装目录中conf文 ...

  2. python GIL :全局解释器

    cpython 解释器中存在一个GIL(全局解释器锁),无论多少个线程.多少颗cpu 他的作用就是保证同一时刻只有一个线程可以执行代码,因此造成了我们使用多线程的时候无法实现并行. 因为有GIL的存在 ...

  3. Python学习之旅（十三）

    Python基础知识(12):函数(Ⅲ) 高阶函数 1.map map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterat ...

  4. 浅谈Vue 项目性能优化 经验

    我优化公司的项目总结的几点: 1.先查看引入的图片大小,如果太大了,可以压缩,压缩路径:https://zhitu.isux.us/ 2.代码包优化, 待下项目开发完成.进行打包源码上线环节,需要对项 ...

  5. F#周报2019年第5期

    新闻 Ionide的Open Collective 发布SAFE至Google Cloud Kubernetes引擎 .NET Core 3预览2 ASP.NET Core在.NET Core 3预览 ...

  6. 日期控件——my97

    一.官网 http://www.my97.net/index.asp 下载: //下文已更新与bootstrap样式的结合 二.demo演示 实际使用时请注意文件引入的实际位置: [补充] 数据库字段 ...

  7. 【Python全栈-后端开发】Django入门基础-2

    Django入门基础知识-2 一 .模版 一.模版的组成 HTML代码+逻辑控制代码 二.逻辑控制代码的组成 1  变量(使用双大括号来引用变量) {{var_name}} 2  标签(tag)的使用 ...

  8. 使用js对WGS-84 ，GCJ-02与BD-09的坐标进行转换

    获取到经纬度在用百度地图进行定位时,却发现行驶轨迹的路线定到海里面去了.从网上查阅,知道此方法. 出处:https://www.jianshu.com/p/53f00ba897f7 一.在进行地图开发 ...

  9. Linux下Solr单机版、集群版安装与配置

    一.安装 1.需要的安装包有apache-tomcat-7.0.47.tar.gz.solr-4.10.3.tgz.tgz(jdk自行安装) 这里默认大家已经安装好jdk与tomcat,所以在这里不做 ...

  10. java框架之SpringBoot(14)-任务

    使用 maven 创建 SpringBoot 项目,引入 Web 场景启动器. 异步任务 1.编写异步服务类,注册到 IoC 容器: package zze.springboot.task.servi ...