vue购物车功能源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.cart {
width: 50px;
height: 50px;
background: orangered;
text-align: center;
font-size: 20px;
position: fixed;
top: 400px;
right: 0;
}
.cart i {
color: #fff
}
.cart span {
display: block;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">珠峰购物车</a>
</div>
</div>
</div>
<div class="container">
<div class="col-md-3 text-center" @dragstart="start($event,index)" draggable="true" v-for="(product,index) in products">
<div class="panel panel-primary">
<div class="panel-heading" v-html="product.productName"></div>
<div class="panel-body">
<img :src="product.productCover" width="130px" height="140px" ref="img">
</div>
<div class="panel-footer">
价格 <span v-html="product.productPrice"></span>
</div>
</div>
</div>
<table class="table table-bordered">
<tr>
<th>
<input type="checkbox" v-model="checkall"> 全选</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="cart in carts">
<td>
<input type="checkbox" v-model="cart.isSelected">
</td>
<td v-html="cart.productName"></td>
<td v-html="cart.productPrice"></td>
<td>
<input type="text" v-model="cart.productCount">
</td>
<td v-html="cart.productPrice*cart.productCount"></td>
<td>
<button @click="remove(cart)" class="btn">删除</button>
</td>
</tr>
<tr>
<td colspan="6">
总价 <span v-html="sum | toInt"></span>
</td>
</tr>
</table>
</div>
<div class="cart" @drop="drop" @dragover.prevent>
<i class="glyphicon glyphicon-shopping-cart"></i>
<span v-html="count"></span>
</div>
</div>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
products: [],
current: '', //当前拖动的是哪个元素
carts: JSON.parse(localStorage.getItem('cartList')) || [],
},
filters: {
toInt(input) { // input = sum
return input.toFixed(2)
}
},
computed: {
count() {
return this.carts.reduce((prev, next) => {
return prev + parseInt(next.productCount);
}, 0)
},
checkall: {
get() { //如果products中有一个元素isSelected是false checkall则为false
//如果其中有一个返回为false 结果就是false
return this.carts.every(item => item.isSelected)
},
set(val) {
this.carts.forEach(item => item.isSelected = val)
}
},
sum() {
return this.carts.reduce((prev, next) => { //es5
if(next.isSelected) {
return prev + next.productCount * next.productPrice
} else {
return prev;
}
}, 0);
}
},
methods: {
remove(cart) { //filter过滤 如果返回true 表示留下并且放到一个新的数组里
this.carts = this.carts.filter(item => item != cart); //es5
},
start(e, index) { //e.dataTransfer.setDragImg
//ref this.$refs.img
// 低版本浏览器不识别 chrome 需要60+
let product = { ...this.products[index],
productCount: 1,
isSelected: true
};
this.current = product; //保存当前拖动的那个元素
e.dataTransfer.setDragImage(this.$refs.img[index], 0, 0)
},
drop() {
//如果当前购物车中 有 则累加数量即可 this.current.id == this.carts其中一项如果相等
if(this.carts.some(item => item.id == this.current.id)) {
this.carts.forEach(item => {
if(item.id == this.current.id) {
item.productCount++;
}
});
} else {
this.carts.push(this.current);
}
}
},
created() { //created中的this 也是vm
//箭头函数中没有this指向
axios.get('./products.json').then(res => {
this.products = res.data;
})
},
});
</script>
</body>
</html>
vue购物车功能源码的更多相关文章
- 出售Illustrator脚本插件面板（包含面板源码，以及面板上所有的功能源码）
出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码) 购买后可提供相应的小修改,以及教你使用往这个多列面里再加上按钮功能! 这套源码可作为工作使用,也可用为新手学习AI脚面 ...
- ios自动滚动图片功能源码
源码AdScrollerView,一个已经封装好的UIScrollView的子类,可以自动滚动图片以及对应的描述语,类似淘宝app首页的广告滚动效果.滚动图片数量不限,并且显示pageControl. ...
- 微信跳转外部浏览器打开指定H5链接的功能源码
通常大家在微信内转发分享H5链接的时候都很容易碰到H5链接在微信内无法打开或在微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要 ...
- 微信最新跳转浏览器功能源码，实现微信内跳转手机浏览器访问网页url
微信最新自动跳转外部浏览器下载app/打开指定页面源码 源码说明: 适用安卓和苹果系统,支持任何网页链接.并且无论链接是否已经被微信拦截,均可实现微信内自动跳转浏览器打开. 生成的跳转链接具有极佳的防 ...
- Java中分页功能源码实例
一.源码(后附使用说明) package com.zhiyou100.crm.util; /** * 分页功能 * @author YangXianSheng * */ public class Pa ...
- python实现最简单的计算器功能源码
import re def calc(formula): formula = re.sub(' ', '', formula) formula_ret = 0 match_brackets = re. ...
- .net 邮件批量发送功能源码
#define debug using System; using System.Text; using System.Linq; using System.IO; using System.Ne ...
- 构建NetCore应用框架之实战篇（七）：BitAdminCore框架登录功能源码解读
本篇承接上篇内容,如果你不小心点击进来,建议从第一篇开始完整阅读,文章内容继承性连贯性. 构建NetCore应用框架之实战篇系列 一.简介 1.登录功能完成后,框架的雏形已经形成,有必要进行复习. 2 ...
- 开源安卓Android流媒体音视频播放器实现声音自动停止、恢复、一键静音功能源码
本文转自EasyDarwin团队John的博客:http://blog.csdn.net/jyt0551/article/details/60802145 我们在开发安卓Android流媒体音视频播放 ...
随机推荐
- C#深入多线程
主线程: th = Thread.CurrentThread; //现在的线程为主线程 th.Name = "MainThread"; //set线程名字:主线程本身没有名字 th ...
- Codeforces 781C Underground Lab
题目链接:http://codeforces.com/problemset/problem/781/C 因为有${K}$个机器人,每个又可以走${\left \lceil \frac{2n}{k} \ ...
- 串口.Qt532测试（同步）
环境:Win7x64.Qt5.3.2 MSVC OpenGL(x86).vs2010(x86) ZC:这里的例子是 同步的函数操作,貌似 如果子线程在等待 WaitCommEvent(...)或Rea ...
- [osg][osgEarth][osgGA][原] EarthManipulator------基于oe的相机漫游器（浅析）
知识基础:osg漫游器基础 class OSGEARTHUTIL_EXPORT EarthManipulator : public osgGA::CameraManipulator EarthMani ...
- 《剑指offer》第五十五题（二叉树的深度）
// 面试题55(一):二叉树的深度 // 题目:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的 // 结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. //如果左右 ...
- git 先创建本地仓库，再关联远程
之前都是先在GitHub或者bitbucket上创建repo,然后在本地直接git clone下来. 如果一定需要先在本地创建好文件夹,然后再关联远程仓库. 是这样: 1在远程创建仓库这步不变. 2 ...
- Codeforces 985 F - Isomorphic Strings
F - Isomorphic Strings 思路:字符串hash 对于每一个字母单独hash 对于一段区间,求出每个字母的hash值,然后排序,如果能匹配上,就说明在这段区间存在字母间的一一映射 代 ...
- Spring Boot 之注解@Component @ConfigurationProperties(prefix = "sms") 使用@ConfigurationProperties读取yml配置
从spring-boot开始,已经支持yml文件形式的配置,@ConfigurationProperties的大致作用就是通过它可以把properties或者yml配置直接转成对象 @Componen ...
- 雷林鹏分享：XML 应用程序
XML 应用程序 本章演示一些基于 XML, HTML, XML DOM 和 JavaScript 构建的小型 XML 应用程序. XML 文档实例 在本应用程序中,我们将使用 "cd_ca ...
- English trip EM2-LP-1A Hi Teacher:Taylor
课上内容(Lesson) 词汇(Key Word ) Introduce vt. 介绍:引进:提出:采用 greet [ɡrit] vt. 欢迎,迎接:致敬,致意:映入眼帘 n. (Greet ...