文档章节

Vue.js实现简单的购物车

eatnothing
 eatnothing
发布于 2016/11/28 22:36
字数 474
阅读 287
收藏 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}
           }
        }
    });

成果

© 著作权归作者所有

共有 人打赏支持
eatnothing
粉丝 36
博文 128
码字总数 68736
作品 0
昌平
程序员
【vue/axios/vue-router】制作一个精致的美团项目

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

浪里行舟
05/17
0
0
太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

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

闰土大叔
06/08
0
0
2018 我所了解的 Vue 知识大全

年初第一个 flag 就是掌握 vue ,哈哈! Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很...

cacao111
07/11
0
0
深入理解Vue的watch实现原理及其实现方式

理解Vue中Watch的实现原理和方式之前,你需要深入的理解MVVM的实现原理,如果你还不是很理解,推荐你阅读我之前的几篇文章: 彻底搞懂Vue针对数组和双向绑定(MVVM)的处理方式 vue.js源码解读...

wangweianger
05/14
0
0
使用vue-router完成简单导航功能

是Vue.js官方提供的一套专用的路由工具库 安装命令如下 实例是一个插件,我们需要在全局引用中通过 将它接入到实例中。 在我们的工程中,是默认的程序入口文件,所有的全局配置都会在这个文件...

玄学酱
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[MicroPython]STM32F407开发板驱动OLED液晶屏

1.实验目的 1.学习在PC机系统中扩展简单I/O 接口的方法。 2.进一步学习编制数据输出程序的设计方法。 3.学习 F407 Micropython开发板控制OLED显示字符。 2.所需元器件 F407 Micropython开发板...

bodasisiter
32分钟前
0
0
php require和include 相对路径一个有趣的坑

以前总是被教育,不要使用相对路径,这样性能比较差,但是相对路径的问题不仅仅是性能哦,看下面这里例子 这是项目结构 .├── main.php├── t│ ├── t1.php│ └── t2.php└─...

anoty
32分钟前
17
0
x64技术之SSDT_Hook

测试环境: 虚拟机: Windows 7 64bit 过PG工具 驱动加载工具 PCHunter64 系统自带的计算器和任务管理器等 实现思路: 实际思路与win32的思路一样.都是替换SSDT表里边的函数地址.不过微软被搞怕...

simpower
34分钟前
0
0
TreeMap源码分析,看了都说好

一、简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现。TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey、get、put 和 remove 操作,效率很...

Java小铺
44分钟前
0
0
协变、逆变

概念 假设 A、B表示类型 ≤ 表示继承关系 f<⋅>表示类型转换 若A ≤ B,则 A是B的子类,B是A的超类 协变、逆变 什么是型变?型变(type variance)允许对类型进行子类型转换。 为了下面讲解先...

obaniu
50分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部