文档章节

Vue.js实现简单的购物车

eatnothing
 eatnothing
发布于 2016/11/28 22:36
字数 474
阅读 303
收藏 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
粉丝 37
博文 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
vue-cli 自动化测试 Nightwatch 详解

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

奇舞周刊
08/29
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

没有更多内容

加载失败,请刷新页面

加载更多

负载均衡的解决方案有哪些

负载均衡器服务可满足大型组织的需求,支持所有数据中心和跨数据中心高可靠性场景。 本地负载均衡,通过附带或者未附带持久性覆盖选项,Incapsula支持各种负载均衡算法,以优化服务器之间的流...

上树的熊
48分钟前
4
0
Java实现在线打开word文档加盖印章/盖章/签名功能

前言: 我们知道,大型一点的OA办公系统都会有很多在线处理office办公文档的需求。其中有一点也基本绕不开,那就是为文档盖章或添加手写签名来保护文档,让被盖章的文档不再被编辑。 在Java中...

山里的红杏
55分钟前
5
0
js控制输入正负数,小数点后保留两位

//限制数字function clearNoNum(obj){ //修复第一个字符是小数点 的情况. if(obj.value !=''&& obj.value.substr(0,1) == '.'){ obj.value=""; } obj.value ...

一直在成长的程序猿
58分钟前
3
0
动态代理

具体场景 为了使代理类与被代理类对第三方有相同的函数,代理类与被代理类一般实现一个公共的interface,定义如下 public interface Subject { void rent(); void hello(String s)...

wuyiyi
今天
2
0
时间字段

我们看看这几个数据库中(mysql、oracle和sqlserver)如何表示时间 mysql数据库:它们分别是 date、datetime、time、timestamp和year。date :“yyyy-mm-dd”格式表示的日期值 time :“hh:...

DemonsI
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部