<!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. java.sql.SQLException: Field 'id' doesn't have a default value（用eclipse操作数据库时报了这种奇怪的错误）的原因与解决方法

    1.错误原因 由于id在数据库表中是作为主键,但是在插入的过程中,没有给予数值,并且没有让其自增 2.解决办法 修改数据库表中的id,让其自增(在插入的过程中,不插入id数据时)

  2. python中元组与数组的区别

    列表: a=['12', '3rr'] 元组: t=(21,34) 列表可以修改,而元组不可以修改,如果元组中仅有一个元素,则要在元素后加上逗号. 元组和列表的查询方式一样. 元组只可读不可修改. 如 ...

  3. php导出超大csv导出方法，读取超大文件或者接受超大数组，防止内存溢出

    基本思路就是,知道总数之后分割成2万一个数组进行查询,最后独立写入csv,避免数据过大导致溢出 速度还不错,在php7下,机器I5 8G内存,128G,SSD,52W多条,大概也就30秒,出来整个文件 ...

  4. [No000018D]Vim快速注释/取消注释多行的几种方法-Vim使用技巧(2)

    在使用Vim进行编程时,经常遇到需要快速注释或取消注释多行代码的场景,Vim教程网根据已有的教程介绍,总结了三种快速注释/取消注释多行代码的方法. 一.使用Vim可视化模式快速注释/取消注释多行 在V ...

  5. MVEAN_day05 Nexus私服对的搭建

    序言:为什么要搭建私服 因为在公司中我们是以团队进行开发的,不在是在自己的本地仓库中进行,我们需要连接公司远程仓库进行jar依赖.在公司的局域网中搭建的私服,然后开发人员连接这台计算机,进行团队开发. ...

  6. vs自定义类模板

    .找到VS安装目录,我的目录是:C:Program Files (x86)Microsoft Visual Studio 12.0 .在C:Program Files (x86)Microsoft V ...

  7. 【Tools】-NO.89.Tools.4.Visual Studio 2017.1.001-【Visual Studio 2017 安装与卸载】-

    1.0.0 Summary Tittle:[Tools]-NO.89.Tools.4.Visual Studio 2017.1.001-[Visual Studio 2017 安装与卸载]- Styl ...

  8. 深入理解Java虚拟机5-chap7-斗者2星

    一.类加载机制 1.类加载机制:虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Class文件加载到内存,这就是类加载机制. 2.类型 ...

  9. 安装archlinux的linux命令记录

    磁盘的分区:cfdisk 格式化分区:mkfs.ext4,mkswap,swapon 查看所有分区:lsblk /dev/sda 先挂载 / 分区:mount /dev/sda1 /mnt archl ...

  10. CentOS 7 服务端口表

    # Note that it is presently the policy of IANA to assign a single well-known# port number for both T ...