文档章节

Vue.js实现简单的购物车

eatnothing
 eatnothing
发布于 2016/11/28 22:36
字数 474
阅读 324
收藏 6

首先将vue全局引入 为了美观我们将bootstrap也引入

    <script src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

首先实现一个商品列表页面

<div id="app">
<ul class="list-group">
    <li class="list-group-item" v-for="good in goods">
        {{good.id}}/{{good.name}}售价:{{good.price}}
        <button type="button" class="btn btn-default btn-xs" v-on:click="addTocar(good)">加入购物车</button>
    </li>
</ul>
</div>

使用vue.js 的v-for语法遍历列表

  var vm = new Vue({
        //初始化绑定id
        el:"#app",
        data:{
          goods:[
              {id:1,name:'炸鸡',price:150,num:0},
              {id:2,name:'炸猪',price:1500,num:0},
              {id:3,name:'炸狗',price:1501,num:0},
              {id:6,name:'炸机',price:1504,num:0},

              ]
        },
        //当页面加载的时候机会执行created方法
        created:function () {
        },methods: {
            addTocar:function (good) {
                //首先需要判断该商品的id 是否存在,如果存在的话不增加列数
                var arr = '';
                car.list.forEach(function (item,id) {
                    arr  += Number(item.id);
                })
                //如果检索的字段没有出现返回-1
                if(arr.indexOf(good.id) > -1){
                    //获取列表中该id的位置
                    var temp = '';
                    
                    for(var i = 0; i< car.list.length;i++){
                        if(good.name == car.list[i].name){
                            temp = i;
                        }
                    }
                    var temp_price = good.price;
                   //此处不适用price,因为数据是双向绑定的 car.list[temp].num += 1;
                }else{
                    //如果数据不存在列表中直接添加
                    car.list.push(good);
                }
            }
        }
    });
增加一件商品
<div id="admin">
    名称:<input type="text" class="form-control" v-model="good.name">
    售价:<input type="text" class="form-control" v-model="good.price">
    <button type="button" class="btn btn-default btn-xs" v-on:click="addToGoods(good)">添加</button>
</div>
    var admin = new Vue({
       el:"#admin",
        data:{
          good:[{id:0,name:'',price:0,num:0}]
        },
        methods:{
           addToGoods:function (good) {
               this.good.id = vm.goods.length + 1
               vm.goods.push(good);
             //增加完商品后需要将其还原成对象形式
               this.good = {name: '', price: 0}
           }
        }
    });
<div id="car">
    <h3>我的购物车  购买的总商品价格{{sum}}</h3>
    <ul class="list-group">
        <li class="list-group-item" v-for="res in list">
            {{res.id}}/{{res.name}}售价:{{res.price}} {{res.num}}
            <button type="button" class="btn btn-default btn-xs" v-on:click="del(res)">删除</button>
        </li>
    </ul>
</div>

实现购物车
  var admin = new Vue({
       el:"#admin",
        data:{
          good:[{id:0,name:'',price:0,num:0}]
        },
        methods:{
           addToGoods:function (good) {
               this.good.id = vm.goods.length + 1
               this.good.num = 0
               vm.goods.push(good);
               this.good = {id:0,name: '', price: 0,num:0}
           }
        }
    });

成果

© 著作权归作者所有

共有 人打赏支持
上一篇: CentOS安装SFTP
下一篇: Mac 安装 valet
eatnothing
粉丝 38
博文 128
码字总数 68736
作品 0
昌平
程序员
私信 提问
前端与移动开发之vue-day6(4)

App.vue 组件的基本设置 头部的固定导航栏使用 Mint-UI 的 Header 组件; 底部的页签使用 mui 的 tabbar; 购物车的图标,使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart,同时,...

czbkzmj
2018/11/21
0
0
【vue/axios/vue-router】制作一个精致的美团项目

一、项目展示: 注意:如果gif动态图看不了,麻烦大家点击github美团项目中mt-app/src/assets/美团.gif便可以观看! 如果大家需要项目源码,请到我的GitHub上下载即可。 二、项目涉及到技术栈...

浪里行舟
2018/05/17
0
0
基于 vue2 + vuex 的大型单页面应用 - vue2-elm

vue2-elm 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用。 前言 初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大...

cangdu
2017/08/23
0
9
vue-cli 自动化测试 Nightwatch 详解

编者按:本文作者奇舞团前端开发工程师冯通 vue-cli 是我最喜欢的脚手架工具, 提供了很多开箱即用的功能, 每次新建一个项目, 我都会一路回车按下来, 唯独到这一步... Setup e2e tests with ...

奇舞周刊
2018/08/29
0
0
太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

前言 一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。 最近两年,太原作为一个准二线城市,各大互联网公司的技术栈也在...

闰土大叔
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据处理也要安全--关于MaxCompute的安全科普

摘要: 企业从未像今天这样可以轻易地存储和使用大数据。然而,当您在使用大数据产品时,是否考虑过其中的安全问题呢?庆幸的是,阿里云产品专家和安全专家早就想你所想急你所急,先行一步将...

阿里云云栖社区
14分钟前
0
0
vue如何编写组件可以通过Vue.use()使用

一般平时用别人的组件时都是通过import引入然后Vue.use()来使用,那么如何让我们写的组件也可以用这种方式使用呢? 1.首先新建一个文件夹例如:Home,然后在该文件中新建两个文件Home.vue和i...

北辰丨丶
14分钟前
1
0
SpringBoot自动配置原理

前言 只有光头才能变强。 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面Spring的文章(以学习的顺序排好): Spring入门这一篇就够了 Spring【依赖注...

Java3y
18分钟前
0
0
如何伪装成一个服务端开发(十) -- Spring MVC 源码

前言 在第七篇我们已经聊过了一些Spring MVC的运行原理,当然大多数人应该还是和我一样迷迷糊糊,只知道一个大概的运行过程,这一篇,我想要从源码的角度更加进一步去了解Spring MVC的整个运...

街角的小丑
23分钟前
1
0
应用前台耗电怎么破?功耗避雷指南已“佩奇”

使用应用时被用户吐槽手机掉电快、卡顿、过度发热,导致用户体验差,以上情况的产生,应用的功耗设计不足是直接症结。 当前,人们对性能体验的追求前所未有,应用设计功能越来越强大,界面也...

安卓绿色联盟
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部