基于Vuejs实现购物车功能
本文实例为大家分享了Vuejs购物车实现代码，供大家参考，具体内容如下
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的vue购物车</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vue.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div class="container">
<template v-if="data.length">
<h3>我的购物车：</h3>
<div class="product">
<div class="item">
<span class="btn btn-default">商品名称</span>
<span class="btn btn-default left">商品单价</span>
<span class="btn btn-default left">商品数量</span>
<span class="btn btn-default left">操作</span>
</div>
<div class="item" style="padding:5%;border: 1px solid black" v-for="item in data">
<span class="btn btn-default">{{item.name}}</span>
<span class="btn btn-default left" style="margin-left: 18%">{{item.price}}</span>
<span>
<em class="btn btn-primary add" v-on:click="add($index)" :class="{off:item.count==11}">+</em>
{{item.count}}
<em class="btn btn-primary reduce" v-on:click="reduce($index)" :class="{off:item.count==1}">-</em>
</span>
<span class="btn btn-danger left" v-on:click="remove(item)">移除</span>
</div>
</div>
<h2>清单：</h2>
<span class="btn btn-primary">商品总价：{{price |currency '$' 2}}</span>
</template>
<template v-else>
<div class="jumbotron">
<h1>您的购物车空了</h1>
<p>是否去重新挑选</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">重新挑选</a></p>
</div>
</template>
</div>
</body>
<script>
new Vue({
el:'.container',
data:{
data:data
},
computed:{
price:function () {
var price = 0;
for(var i=0;i<this.data.length;i++){
var self = this.data[i];
price += self.count * self.price;
}
return price;
}
},
methods:{
add:function ($index) {
var self = this.data[$index];
if(self.count >10){
return false;
}
self.count++;
},
reduce:function($index){
var self = this.data[$index];
if(self.count <= 1){
return false
}
self.count--;
},
remove:function(item){
this.data.$remove(item);
}
}
})
</script>
</html>
css:
h3{
text-align: center;
}
.left{
margin-left: 14%;
}
.item{
text-align: center;
padding: 3%;
}
.add{
margin-left: 15%;
}
.off{
background-color: lightgrey;
border: 1px solid lightgrey;
}
js:
/**
* Created by Administrator on 2016/7/29.
*/
var data = [
{
name:'IPhone 6',
price:5466,
id:1,
count:1
},
{
name:'IMac',
price:7466,
id:2,
count:1
},
{
name:'iPad',
price:5400,
id:3,
count:1
}
]
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vuejs实现购物车功能
开始更新前端框架Vue.JS的相关博客. 功能概述 学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码 代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY
-
Vue实现购物车功能
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> &l
-
用vue和node写的简易购物车实现
项目介绍 这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境 因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q
-
vuejs手把手教你写一个完整的购物车实例代码
由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
-
Vue2.0实现购物车功能
简介 vue.js是由华人尤雨溪开发的一套MVVM框架.vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于具有复杂交互逻辑的前端应用,如一些单页应用程序,有很多表单操作,页面中的内容需要根据用户的操作动态变化. 主要特性: 1.响应式的数据绑定 2.组件化开发 3.Virtual DOM 开发准备 工具 我使用的编辑器是sublime text3,首先要先安装个插件sublimeServer,用来搭建一个http服务器,使用详情请查看这篇博
-
基于Vuejs实现购物车功能
本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q
-
基于JavaScript实现购物车功能
本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> </head&g
-
基于vuex实现购物车功能
本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下 先看效果: 代码: <template> <div class="Home"> <h1>vuex购物车案例</h1> <add-from></add-from> <shop-cart></shop-cart> </div> </template> <script> import
-
Javascript实现购物车功能的详细代码
我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化. 现在,笔者对购物车进行了简单实现,能够实现真实购物车当中的大部分功能.在本示例当中,用到了javascript中BOM操作,DOM操作,表格操作,cookie,json等知识点,同时,采用三层架构方式对购物车进行设计,对javascript的
-
基于Vuejs的搜索匹配功能实现方法
最近一直在看vue,查了很多资料,看了很多文档和博客,大概半知半解了,然后利用所理解的知识写了一个简单的搜索匹配功能. 大概长这个样子: 数据都是假的 代码部分 (注意我引用的是本地vue.min.js文件,请注意文件路径.) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue测试2</title> <script type=&quo
-
基于CI(CodeIgniter)框架实现购物车功能的方法
本文实例讲述了基于CI(CodeIgniter)框架实现购物车功能的方法.分享给大家供大家参考,具体如下: 在商城项目中,购物车是非常重要的一环,此处留下源码,留作笔记!!! 话不多说,往下看: 1. 源代码 <?php defined('BASEPATH') OR exit('No direct script access allowed'); class cart extends Home_Controller { private $info = array(); #前台提交数据 priva
-
基于XML的购物车的实现
购物车是电子商务网站中不可缺少的组成部分,但目前大多数购物车只能作为一个顾客选中商品的展示,客户端无法将购物车里的内容提取出来满足自己事务处理的需要,而这一点在有些电子商务活动中很有必要.XML的出现使得网络上传输的数据变得有意义起来,我们可以根据不同的要求以不同的样式将一个购物车的内容显示出来. 本文将详细分析一个由Java实现的基于XML的购物车.下面是一个包含了五件商品的购物车的XML内在结构:它的根元素为cart,total元素表示购物车内的总金额,每个item元素表示一件商品,item
-
基于Vuejs框架实现翻页组件
翻页功能对前端后端都是个难题啊!今天终于给踩了!哈哈!整理下方法,我是基于vueJs写的,同样适用于angular哈! 封装下载地址:vue.js翻页组件 效果截图: 整体实现逻辑,当用户点击页码时,ajax从后端获取数据,包括:records(当前页查询到的记录),totalRecords: 121(所有记录),currentPage(当前页码),totalPage(总页码),size(当前页显示数量),之后用我封装的算法assemblePageTurnerParams,算出页面展示哪些页码.
-
React-Native使用Mobx实现购物车功能
在工作中,购物车场景非常常见.本文实现基于React-Native和Mobx实现两种购物车例子. 其中,后期会加入动画等其他.本期先实现基础功能. 二:基于State实现购物车 1-:ShoppingCarPage.js export default class ShoppingCarPage extends Component { static navigationOptions = { headerTitle : '基于State购物车', }; constructor(props) { s