Vue.js框架实现购物车功能

本文实例为大家分享了Vue.js框架实现购物车的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../lib/vue.min.js"></script>
    </head>

    <body>

        <div id="app" style="position: relative;left: 30%">
            <table cellpadding="10">
                <thead>
                    <th><input type="checkbox" v-model="cb" v-on:click="allSelect">全选</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>金额</th>
                    <th>操作</th>
                </thead>

                <tbody>
                    <tr v-for="x in info">
                        <td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td>
                        <td>{{x.name}}</td>
                        <td>{{x.price}}</td>
                        <td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td>
                        <td>{{x.total}}</td>
                        <td><button v-on:click="del(x)">删除</button></td>
                    </tr>
                </tbody>
            </table>

            <Br>
            <p>总金额:{{all}}</p>
        </div>

        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    all: 0,
                    cb: false,
                    info: [{
                        bol: false,
                        name: "iphone7",
                        price: 6000,
                        num: 1,
                        total: 6000
                    }, {
                        bol: false,
                        name: "荣耀6x",
                        price: 1200,
                        num: 1,
                        total: 1200
                    }, {
                        bol: false,
                        name: "dell笔记本",
                        price: 4000,
                        num: 1,
                        total: 4000
                    }]
                },
                methods: {
                    //计算单价
                    count: function(obj) {
                        for(var i = 0; i < this.info.length; i++) {
                            //
                            if(this.info[i] == obj) {
                                this.info[i].total = obj.price * obj.num;
                            }
                            //如果被选中了,就计算总价格
                            if(obj.bol) {
                                this.allSelect();
                            }
                        }
                    },
                    //删除
                    del: function(obj) {
                        this.info.splice(this.info.indexOf(obj), 1)
                        this.allCount();
                    },

                    //单选
                    sign: function() {
                        this.allCount();
                    },
                    //全选
                    allSelect: function() {

                        for(var i = 0; i < this.info.length; i++) {
                            this.info[i].bol = this.cb;
                        }
                        this.allCount();
                    },
                    //计算总价
                    allCount: function() {
                        //每次计算总价都要清空
                        this.all = 0;
                        for(var i = 0; i < this.info.length; i++) {
                            //计算被选中的商品
                            if(this.info[i].bol) {
                                this.all += this.info[i].total;
                            }
                        }
                    }

                }
            })
        </script>
    </body>

</html>

效果图:

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于vue.js实现购物车

    本文实例为大家分享了vue.js实现购物车的具体代码,供大家参考,具体内容如下 template <template> <div class="all"> <div class="head"> <span>购物车</span> </div> <ul class="menu"> <li class="li"> <input ty

  • Vue.js实现的购物车功能详解

    本文实例讲述了Vue.js实现的购物车功能.分享给大家供大家参考,具体如下: 使用计算属性,内置指令,方法等基础知识开发购物车. 需求分析:展示一个已经加入购物车的商品列表,包含商品名称.商品单价.购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除.效果如图所示: --实例来自<Vue.js实战>第五章 逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleR

  • Vue.js搭建移动端购物车界面

    本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3.  实时更新所选择物品的总价格 HTML部分 首先给出HTML部分代码和注释,显示了整个界面的结构. <body> <div class="checkout"> <div id="app"> <div class="container"> <div class=

  • vue.js购物车添加商品组件的方法

    现实向购物车添加商品组件 代码 <template> <div class="cartcontrol"> <!--商品减一区域--> <div class="reduce" v-show="food.count>0"> <i class="icon-remove_circle_outline"></i> </div> <!--商品数

  • Vue.js实现开发购物车功能的方法详解

    本文实例讲述了Vue.js实现开发购物车功能的方法.分享给大家供大家参考,具体如下: 购物车一般包含商品名称.单价.数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选: 我们把这个小项目分为三个文件: index.html (页面) index.js (Vue 脚本) style.css (样式) 1 index.js 首先在 js 中初始化 Vue 实例,整体模板如下: var app = new Vue({ el: '#app', data: { ... }, moun

  • vue.js实现简单购物车功能

    本文实例为大家分享了vue.js实现简单购物车的具体代码,供大家参考,具体内容如下 这次我将给大家带来一个vue.js实现购物车的小项目,如有不足请严厉指出. 购物车功能有:全选和选择部分商品,选中商品总价计算,商品移除,以及调整购买数量等功能. js主要有以下方法 加函数,减函数,手动修改数量判断库存函数,总价格计算函数,单选事件,全选事件,一共分为6个事件 具体效果如下图 代码在这里 main.js 'use strict' var app = new Vue({ el: '#app', d

  • Vue.js框架实现购物车功能

    本文实例为大家分享了Vue.js框架实现购物车的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="

  • vue+vant-UI框架实现购物车的复选框全选和反选功能

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(item,index) in shoppingListData.rows" :key="index" > <van-checkbox :value="item.goods_id" v-model="item.isChecked" ch

  • Vue分页效果与购物车功能

    分页组件 首先来创建项目: 分页组件,做项目不要写动手写代码,要想想业务逻辑,怎么写,如何写才是最好的呈现方式,做项目不急,要先想好整体的框架,从底层一开始最想要的是什么做起. 先动代码,边做边想是会出问题的,而且还会卡壳,让你半路出家的. 分页组件,你觉得要什么内容,是页面?如果不懂可以去看看别人的分页是怎么做的,考虑业务逻辑,整体出发去思考问题.要不然我去百度看看,别人的分页效果. 看了后做不出来也是没有关系的,我们呢? 可以从底部出发,从最小的逻辑开始,从做这个需要考虑到什么想起,一步一步

  • html+vue.js 实现漂亮分页功能可兼容IE

    当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案 先看一下实现效果: 上代码: 1.简单搞一搞 CSS,此处代码有折叠 2.简单搞一搞 HTML <div id="app" v-cloak @click="showOption=false"> 第{{pageIndex}}页, 每页显示{{pageSize}}条 <div v-show="

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • Vue.js实现价格计算器功能

    本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial

  • 基于CI(CodeIgniter)框架实现购物车功能的方法

    本文实例讲述了基于CI(CodeIgniter)框架实现购物车功能的方法.分享给大家供大家参考,具体如下: 在商城项目中,购物车是非常重要的一环,此处留下源码,留作笔记!!! 话不多说,往下看: 1. 源代码 <?php defined('BASEPATH') OR exit('No direct script access allowed'); class cart extends Home_Controller { private $info = array(); #前台提交数据 priva

随机推荐