vue.js实战——升级版购物车
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车示例</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app" v-cloak>
<template v-if="allListNum">
<table>
<thead>
<tr>
<th>
<input type="checkbox" v-model="checkAll">全选
</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<template v-for="(item,index) in list">
<tr v-if="item.content.length">
<td colspan="5">{{item.name}}</td>
</tr>
<tr v-for="(small,smallIndex) in item.content">
<!-- <td>{{index+1}}</td> -->
<td><input type="checkbox" :checked="small.check" @click="isAll(index,smallIndex)"> {{small.check}}</td>
<td>{{small.name}}</td>
<td>{{small.price}}</td>
<td>
<button @click="handleReduce(index,smallIndex)" :display="small.count===1">-</button>
{{small.count}}
<button @click="handleAdd(index,smallIndex)">+</button>
</td>
<td>
<button @click="handleRemove(index,smallIndex)">移除</button>
</td>
</tr>
</template> </tbody>
</table>
<div>总价：￥{{totalPrice}}</div>
</template>
<div v-else>
购物车为空
</div>
</div>
<script src="../../vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
JS：
var app=new Vue({
el:'#app',
data:{
list:[
{
name:'电子产品',
content:[
{
id:1,
name:'iPhone 7',
price:6288,
count:1,
check:false
},{
id:2,
name:'iPad Pro',
price:5888,
count:1,
check:false
},{
id:3,
name:'MacBook Pro',
price:21488,
count:1,
check:false
}
]
},{
name:'图书',
content:[
{
id:1,
name:'《小王子》',
price:10000000000,
count:1,
check:false
},{
id:2,
name:'《失控》',
price:100,
count:1,
check:false
},{
id:3,
name:"《目送》",
price:40,
count:1,
check:false
},{
id:4,
name:'《爱与孤独》',
price:10,
count:1,
check:false
}
]
}
],
checkAll:false,
smallHand:false
},
computed:{
totalPrice:function(){
var arr=[];
for(var i=0;i<this.list.length;i++){
arr=arr.concat(this.list[i]['content']);
}
this.newList=arr.filter(function(item){
if(item.check){
return item;
}
});
var total=0;
for(var i=0;i<this.newList.length;i++){
var item=this.newList[i];
total+=item.price*item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');//匹配后面已3个数字结尾的非单词边界，换成“,”
/* replace:
用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
\B :匹配非单词边界
(red|blue|green)：查找任何指定的选项
?=n ：匹配任何其后紧接指定字符串n的字符串（n量词） 提供后面的n找？
\d :查找数字
n{X}：匹配包含X个n的序列字符串
\d{3}：匹配含有3个数字的字符串
n$ :匹配任何结尾为n的字符串
n+ :匹配任何包含至少一个n的字符串
(\d{3})+$ ：匹配至少一个已含有3个数字字符串结尾的字符
*/
},
allListNum:function(){
var allNum=0;
for(var i=0;i<this.list.length;i++){
var item=this.list[i]['content'];
for(var j=0;j<item.length;j++){
allNum++;
}
}
return allNum;
}
},
methods:{
handleReduce:function(index,smallIndex){
console.log(index);
console.log(smallIndex);
if(this.list[index]['content'][smallIndex].count===1) return;
this.list[index]['content'][smallIndex].count--;
},
handleAdd:function(index,smallIndex){
this.list[index]['content'][smallIndex].count++;
},
handleRemove:function(index,smallIndex){
this.list[index]['content'].splice(smallIndex,1);
var num=0;
for(var i=0;i<this.list.length;i++){
var item=this.list[i]['content'];
for(var j=0;j<item.length;j++){
if(item[j].check){
num++;
}else{
num--;
}
}
}
if(num==this.allListNum){
this.checkAll=true;
}else{
this.checkAll=false;
}
},
isAll:function(index,smallIndex){
console.log(this.list[index]['content'][smallIndex].check);
var indexItem=this.list[index]['content'][smallIndex];
indexItem.check=!indexItem.check;
var num=0;
for(var i=0;i<this.list.length;i++){
var item=this.list[i]['content'];
for(var j=0;j<item.length;j++){
if(item[j].check){
num++;
}else{
num--;
}
}
}
console.log(num);////（选中了最后一个）3-全部勾选-勾选全选 （之前全部勾选，取消了任意一个勾选） 1-取消全选的勾选
// if(num==7||(num==5&&indexItem.check==false)){ 这里的值不能写死，太笨了
if(num==this.allListNum||(num==(this.allListNum-2)&&indexItem.check==false)){
this.checkAll=indexItem.check;
this.smallHand=true;
}
}
},
watch:{
checkAll:function(){
if(this.smallHand){
}else{
for(var i=0;i<this.list.length;i++){
var list=this.list;
for(var j=0;j<list[i]['content'].length;j++){
this.list[i]['content'][j]['check']=this.checkAll;
}
}
}
this.smallHand=false;
}
}
})
CSS：
[v-cloak] {
display: none;
}
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing:;
empty-cells: show;
}
table th,
table td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
table th {
background: #f7f7f7;
color: #5c6b77;
font-weight:;
white-space: nowrap;
}
总结：相比前一个购物车，这个购物车可实现物品分类，数据又多了一层嵌套。
vue.js实战——升级版购物车的更多相关文章
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- vue.js实战(文摘)
---------------第1篇 基础篇 第1章 初始vue.js 第2章 数据绑定和第一个vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置命令 第6章 ...
- Vue.js实战
指令 什么是指令 指令,directives,是vue非常常用的功能,在template里. 都是以v-开头 不是自己所为html元素,比如假设指令叫v-abc,没有这种写法,这是组件(compone ...
- Vue.js 实战教程（附demo）
在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- vue.js实战——props单向数据流
Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...
随机推荐
- 跨域iframe如何实现高度自适应？
经常有项目会要求实现iframe高度自适应,如果是同域的还好说,如果是跨域的,父页面没有办法操作子页面,想要正确获取子页面高度的话,可以采用以下办法: 方法一:使用HTML5 postMessage ...
- Miller Rabin算法详解
何为Miller Rabin算法 首先看一下度娘的解释(如果你懒得读直接跳过就可以反正也没啥乱用:joy:) Miller-Rabin算法是目前主流的基于概率的素数测试算法,在构建密码安全体系中占有重 ...
- 控制台程序(C#)不弹出认证窗口连接到Dynamics CRM Online的Web API
摘要: 本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复271或者20180602可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyon ...
- iOS----------常见宏定义
在我们日常的项目中,合理的使用宏定义,会大大减少我们的代码量,以及代码的可读性,为方便读者使用,总结如下: pragma mark - Application相关 ///=============== ...
- asp.net core自定义端口
asp.net Core 自定义端口 官方文档 aspnet内库源码: https://github.com/aspnet dotnet系统内库源码:https://github.com/dotnet ...
- 从 RAID 到 Hadoop Hdfs 『大数据存储的进化史』
我们都知道现在大数据存储用的基本都是 Hadoop Hdfs ,但在 Hadoop 诞生之前,我们都是如何存储大量数据的呢?这次我们不聊技术架构什么的,而是从技术演化的角度来看看 Hadoop Hdf ...
- Python第十一天 异常处理 glob模块和shlex模块 打开外部程序和subprocess模块 subprocess类 Pipe管道 operator模块 sorted函数 os模块 hashlib模块 platform模块 csv模块
Python第十一天 异常处理 glob模块和shlex模块 打开外部程序和subprocess模块 subprocess类 Pipe管道 operator模块 sorted函 ...
- JavaCC的TokenManager和Parser
TokenManager不会感知Parser的存在,这意味着TokenManager会尽量匹配足够长的终结符,而不是依据Parser的语法规则. 当被解析的文本为" @@ "时,T ...
- Spring Ioc工作机制 初步
Spring IoC工作原理 Spring 启动时读取应用程序提供的Bean配置信息,并在Spring容器中生成一份相应的Bean配置注册表,然后根据这张注册表实例化Bean,装配好Bean之间的依赖 ...
- 高端内存映射之kmap持久内核映射--Linux内存管理(二十)
1 高端内存与内核映射 尽管vmalloc函数族可用于从高端内存域向内核映射页帧(这些在内核空间中通常是无法直接看到的), 但这并不是这些函数的实际用途. 重要的是强调以下事实 : 内核提供了其他函数 ...