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流媒体音视频播放 ...
随机推荐
- 【Python】【jupyter-notebook】
1. win7 安装:https://www.cnblogs.com/zlslch/p/6984403.html 1.Jupyter Notebook 和 pip 为了更加方便地写 Python ...
- 转youhu科技的文章 勿怪 感激 感激
资源加载 资源加载是加载模块中最为耗时的部分,其CPU开销在Unity引擎中主要体现在Loading.UpdatePreloading和Loading.ReadObject两项中,相信经常查看Prof ...
- Centos6.8安装redis(一)
最近有在学习会话共享的配置,其中一种呢是 nginx+redis+tomcat 的会话共享配置,在记录此会话共享配置之前呢先记录下redis等的安装.这篇先简单记录下redis的安装,是其中一种方式, ...
- python 操作剪切板
python3 在使用网上找到的一些使用剪切板的片段时发现存在写入剪切板后乱码的情况, 研究后发现python3不能使用SetClipboardData方法, 要使用SetClipboardText ...
- Sqlserver中分页,2012后支持offset + fetch，2012之前用rownum嵌套查询
今天发现原先用的sql offset fetch好用,换了一个DB就歇菜 歇菜截图 比较了一下,是数据库版本的问题 一个是13,一个是10 版本低的不支持用offset + fetch 进行分页,ms ...
- macOS下Hive 2.x的安装与配置
1 简介 Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的[SQL]查询功能,可以将SQL语句转换为MapReduce任务进行运行.其优点是学习成本 ...
- 大话WebRTC的前世今生
音视频的历史 音视频可以说是人类与生俱来的需求,人一出生就要用耳朵听,用眼睛看.中国的古代神话中为此还专门设置了两位神仙(千里眼和顺风耳),他们可以听到或看到千里之外的声音或景像. 为了解决听的远和看 ...
- 微信小程序动态更改样式
获取列表长度(动态渲染),当长度>x时添加内联样式并绑定数据{{}},通过js动态更改{{}}
- python logging日志输出个文件中
# -*- coding:utf-8 -*- import logging # 引入logging模块 import os.path import time # 第一步,创建一个logger logg ...
- 雷林鹏分享：jQuery EasyUI 扩展
jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editab ...