<!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. C++打开剪切板，获取剪切板数据

    if (::OpenClipboard(NULL) && ::IsClipboardFormatAvailable(CF_HDROP)) { HDROP hDrop = (HDROP) ...

  2. TensorRT层和每个层支持的精度模式

    下表列出了TensorRT层和每个层支持的精确模式.它还列出了该层在深度学习加速器(DLA)上运行的能力.有关附加约束的更多信息,请参见 DLA Supported Layershttps://doc ...

  3. Vue事件总线（eventBus）$on()会多次触发解决办法

    项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...

  4. Python idle运行代码出现'ascii' codec can't encode characters in position 0-2

    编码问题,采用一种方法: Python代码 ,开头加: import sys reload(sys) sys.setdefaultencoding('utf8') 在idle中运行后没错误,但是不显示 ...

  5. python 发送带附件的邮件

    特别注意的地方:filespart.add_header("Content-Disposition","attachment",filename=file_na ...

  6. python练习题-day9

    2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def dan_index(itter): li=[] for i in range(len(itte ...

  7. Spring 学习教程（二）： IOC/DI+AOP

    1. IOC / DI Spring是一个基于IOC和AOP的结构J2EE系统的框架 IOC 反转控制 是Spring的基础,Inversion Of Control 简单说就是创建对象由以前的程序员 ...

  8. java框架之Shiro-安全/权限框架

    准备 简介 Apache Shiro 是 Java 的一个安全(权限)框架. Shiro 不仅可以用在 JavaSE 环境,也可以用在 JavaEE 环境. Shiro 可以完成:认证.授权.加密.会 ...

  9. 遇到NotificationService: Suppressing notification from package com.example.dell.servicebestpractice by u错误

    一般来说是手机设置没有允许通知

  10. to_date

    SQL> ALTER SESSION SET NLS_DATE_FORMAT = 'YYYY-MM-DD HH24:MI:SS'; 会话已更改. SQL> SELECT TO_DATE(' ...