Vue购物车

最新推荐文章于 2024-06-13 07:27:27 发布
最新推荐文章于 2024-06-13 07:27:27 发布
阅读量250 收藏
点赞数 2
文章标签： Vue 购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42835213/article/details/87855423
版权

第五次记录 新人

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #666666;
        }
        .box{
            width: 426px;
            height: 374px;
            margin: 100px auto;
            background-color: #ffffff;
            box-shadow:10px 10px 5px #888888;
            position: relative;
        }
        .box .box_item{
            width:426px ;
            height: 100px;
            box-shadow: 3px 3px 3px #dddddd;
        }
        .box .box_item .box_left{
            width: 50px;
            height: 100px;
            line-height: 100px;
            float: left;
            text-align: center;
        }
        .box  .box_item .box_left>input{
            width: 20px;
            height: 20px;
            /*border-radius: 50%;*/
        }
        .box .box_item  .box_right{
            width: 375px;
            height: 100px;
            float: left;
            position: relative;
        }
        .box .box_item  .box_right>img{
            width: 67px;
            height: 67px;
            float: left;
            background-color: #666666;
            margin-top: 20px;
        }
        .box .box_item  .box_right>h3{
            width: 300px;
            float: left;
            font-size: 17px;
            margin-top: 20px;
            margin-left: 5px;
        }
        .box .box_item .box_right>span:nth-child(3){
            color: gray;
            font-size: 13px;
            display: inline-block;
            margin-left: 5px;
        }
        .box .box_item .box_right>span:nth-child(5){
            color: #e4393e;
            font-size: 16px;
            float: left;
            margin-left: 5px;
        }
        .box_right_Calc{
            position: absolute;
            bottom: 10px;
            right: 20px;
            border: 1px solid #9A9A9A;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
        }
        .box_right_Calc .calcDown{
            display: inline-block;
            width: 30px;
            height: 30px;
            cursor: pointer;
        }
        .box_right_Calc .calcNum{
            width: 28px;
            height: 28px;
            border: none;
            text-align: center;
            border-left: 1px solid #9A9A9A;
            border-right: 1px solid #9A9A9A;
            outline: none;
        }
        .box_right_Calc .calcUp{
            display: inline-block;
            width: 30px;
            height: 30px;
            cursor: pointer;
        }
        .box_footer{
            position: absolute;
            width:426px;
            height: 69px;
            background-color: #ffffff;
            bottom: 0
        }
        .box_footer_left{
            width: 69px;
            line-height: 69px;
            text-align: center;
            float: left;
            position: relative;
        }
        .box_footer_left>input{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            left: 10px;
        }
        .box_footer_left>span:nth-child(2){
            float: right;
            display: block;
        }
        .box_footer_prices{
            margin-left: 20px;
            float: left;
            line-height: 30px;
        }
       .box_footer_Computations{
           width: 135px;
           height: 69px;
           background-color: #f5a625;
           float: right;
           line-height: 69px;
           text-align: center;
       }
        .box_footer_Computations>span{
            color: white;
        }
    </style>

</head>
<body>
    <div id="app">
        <div class="box">
            <div class="box_item" v-for="(item, index) in arr">
                <div class="box_left">
                    <input type="checkbox" v-model="item.isTrue" @change="oneChange" />
                </div>
                <div class="box_right">
                    <img :src='item.thumbnail' height="130" width="129"/>
                    <h3>{{item.name}}</h3>
                    <span>规格:50g</span><br/>
                    <span>￥{{item.reduct_price}}</span>
                    <div class="box_right_Calc">
                        <span  class="calcDown" @click="calcDown(index)">-</span>
                        <input class="calcNum" v-model.number="item.num" @change="onWrite"/>
                        <span  class="calcUp" @click="calcUp(index)" >+</span>
                    </div>
                </div>
            </div>


            <div class="box_footer">
                <div class="box_footer_left">
                    <input type="checkbox" @change="allChecked" v-model="all"/>
                    <span>全选</span>
                </div>
                <div class="box_footer_prices">
                    <span>总计：￥{{totalPrices}}</span><br/>
                    <span>不含运费，已优惠￥0.00</span>
                </div>
                <div class="box_footer_Computations">
                    <span>去结算({{total}}件)</span>
                </div>
            </div>
        </div>
    </div>
</body>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                arr:[
                    {
                        "id": "00001",
                        "name": "施华蔻伊采染发膏60ml",
                        "brand": "施华蔻",
                        "original_price": "100",
                        "inventory": "1062",
                        "thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products (1).jpg",
                        "product_id": "00021",
                        "time_start": "2018-12-17 06:00:00",
                        "time_end": "2018-12-17 07:00:00",
                        "total": "727",
                        "reduct_price": "69",
                        "stock": "113",
                        "num":3,
                        "isTrue":false
                    }, {
                        "id": "00002",
                        "name": "施华蔻伊采染发膏100ml",
                        "brand": "施华蔻",
                        "original_price": "264",
                        "inventory": "2615",
                        "thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products (2).jpg",
                        "product_id": "00022",
                        "time_start": "2018-12-17 21:00:00",
                        "time_end": "2018-12-17 23:00:00",
                        "total": "559",
                        "reduct_price": "241",
                        "stock": "320",
                        "num":2,
                        "isTrue":false
                    }, {
                        "id": "00003",
                        "name": "施华蔻伊采染发膏200ml",
                        "brand": "施华蔻",
                        "original_price": "97",
                        "inventory": "3001",
                        "thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products (3).jpg",
                        "product_id": "00023",
                        "time_start": "2018-12-17 07:00:00",
                        "time_end": "2018-12-17 08:00:00",
                        "total": "2393",
                        "reduct_price": "35",
                        "stock": "1054",
                        "num":2,
                        "isTrue":false
                    }
                ],
                all:false
            },
            methods:{
                //手动输入
                onWrite:function(event){

                },
                //单选
                oneChange:function(){
                    this.all=true;
                    for (var i=0;i<this.arr.length;i++){
                        if (!this.arr[i].isTrue){
                            this.all = false;
                            break;
                        }
                    }
                },
                //全选
                allChecked:function () {
                    for (var i=0;i<this.arr.length;i++){
                        this.arr[i].isTrue =this.all;
                    }
                },
                //减
                calcDown:function (index) {
                    if (this.arr[index].num>0){
                        this.arr[index].num-=1;
                    }
                },
                //加
                calcUp:function (index) {
                    this.arr[index].num +=1;
                }
            },
            computed:{
                //总计
                totalPrices:function () {
                    var num=0;
                    for (var i=0;i<this.arr.length;i++){
                        if (this.arr[i].isTrue){
                            num += parseInt(this.arr[i].reduct_price)*parseInt(this.arr[i].num)
                        }
                    }
                    return num;
                },
                //件数
                total:function () {
                    var number=0;
                    for (var i=0;i<this.arr.length;i++){
                        if (this.arr[i].isTrue){
                            number += this.arr[i].num
                        }
                    }
                    return number;
                }
            }
        })
    </script>
</html>
夏去秋来_
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue购物车
wenxiukeke的博客
11-14 558
购物车 这里用vue做了一个购物车计算，功能：加减商品，商品总价根据数量发生变化；移除商品，商品总价等于剩余存在购物车的商品。 用到了Vue的computed的计算属性，v-for指令，v-on(@)指令，v-bind(:)指令，click事件，disabled表单属性。 代码 <!DOCTYPE html> <html lang="en"> <head> ...
vue购物车商品累加结算特效代码
03-20
在电商网站中，购物车功能是不可或缺的一部分，而"vue购物车商品累加结算特效代码"则是利用Vue.js实现的一个全面的购物车系统，旨在提供商品全选、商品累加统计以及收藏等常见功能。 首先，让我们深入理解购物车的...
【Vue】购物车 - 静态布局
最新发布
qq_39921135的博客
06-13 203
所以为了便于维护，一般都会将购物车的数据基于 vuex 分模块管理。说明：购物车 数据联动关系 较多，且通常会封装一些 小组件，
VUE购物车
qq_15980201的博客
12-01 511
bootstrap+vue,js(vue-resource)完成购物车。实现了商品的选择，删除，全选（取消全选）。 以及商品的价格双向绑定和总价的实时计算。 巩固ajax获取模拟后台的json数据，并对数据进行操作处理。 宋先森的购物车  
vue 购物车
学习记录
06-26 293
view 部分&lt;template&gt; &lt;div id="app"&gt; &lt;table id="cartTable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;label&gt;&lt;input cl
Vue购物车地址选配
08-24
在本文中，我们将深入探讨如何使用Vue2.0来实现购物车中的地址选配功能。Vue.js是一个流行的轻量级JavaScript框架，它以其简洁的API和强大的组件化能力而受到开发者的喜爱。在这个项目中，我们将关注如何在购物车...
vue购物车页
03-04
在这个"vue购物车页"项目中，我们主要关注的是如何利用Vue.js来构建一个功能完备的购物车系统，包括商品的选择、数量的增减、总价和总数量的计算等关键功能。 首先，Vue.js的核心是其响应式数据绑定系统，这使得...
vue购物车地址订单详情特效代码
03-20
vue购物车地址订单详情代码是一款购物车地址及付款详情，收货人信息添加修改，支付方式选择，送货清单，发票信息，使用优惠券等订单功能详情页面模板。 vue购物车地址订单详情代码截图
vue购物车模板，功能齐全，使用方便
11-01
Vue购物车模板是基于Vue.js构建的，旨在为电商应用提供一个完整的购物车功能解决方案。这个模板包含了从商品添加到购物车、数量增减、商品选择与取消、总价计算、购物车清空等一系列功能，适用于快速搭建具有购物车...
vue项目之购物车
08-08
使用vue构建的项目，主要实现购物车逻辑功能。使用vant 框架配合开发。
vue之购物车
zhangxy
02-27 171
vue.js的引用是命令安装模式，这里直接上App.vue文件，注意：@是v-on的缩写，: 是v-bind: 的缩写。 &lt;template&gt; &lt;div&gt; &lt;p&gt;购物车&lt;/p&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;序号&lt;/th&gt;
vue（购物车）
杨前露的博客
03-20 315
&lt;template&gt; &lt;div&gt; &lt;div class="row"&gt; &lt;!-- 菜单 --&gt; &lt;div class="col-sm-12 col-md-8"&gt; &lt;table class="table"&gt; &lt;thead class=&q
Vue —— 购物车
猫猫的小茶馆
08-10 1399
购物车长得很丑，是这样的。。。 用Vue实现一个简易购物车功能，数据都是自己模拟的（心酸），算了少说话多做事贴代码： &lt;template&gt; &lt;div class="shoppingCart"&gt; &lt;!-- 头部 --&gt; &lt;div class="header"&gt; &lt;div class="he
Vue简易购物车
qq_43090756的博客
05-15 477
Vue.js 简单购物车 序号 商品名称 商品价格 购买数量 操作 {{ iphone.id }} {{ iphone.name }} {{ iphone.price }} - ...
vue实现购物车
lydia88的专栏
09-24 391
使用vue.js完成购物车的编写，可以增加数量，移除某个对象，总金额也会随之发生改变。 index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车示例</title> &l...
vue 实现购物车
zhaohanqq的博客
12-16 243
&lt;template&gt; &lt;div&gt; &lt;div class="shopcart"&gt; &lt;div class="content"&gt; &lt;div class="content-left" @click="toggleShow"&gt; &l
vue购物车cart
05-13
Vue购物车（Cart）是一个用Vue框架实现的网页购物车应用程序。它可以让用户选择商品，加入购物车，修改商品数量，计算总价，清空购物车等功能。Vue购物车的实现过程中使用了Vue组件、路由、状态管理等技术。 在Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值