vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1
直接放代码好了，全选的部分搞了好久，代码好像有点啰嗦，好在实现功能了(*^▽^*)
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="list.length">
<table>
<thead>
<tr>
<th>
<input type="checkbox" v-model="checkAll">全选
</th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<!-- <td>{{index+1}}</td> -->
<td><input type="checkbox" :checked="item.check" @click="isAll(index)"> {{item.check}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)" :display="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</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:[
{
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
}
],
checkAll:false,
smallHand:false
},
computed:{
totalPrice:function(){
this.newList=this.list.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个数字字符串结尾的字符
*/
}
},
methods:{
handleReduce:function(index){
if(this.list[index].count===1) return;
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
},
isAll:function(index){
console.log(this.list[index].check);
var indexItem=this.list[index];
indexItem.check=!indexItem.check;
var num=0;
for(var i=0;i<this.list.length;i++){
var item=this.list[i];
if(item.check){
num++;
}else{
num--;
}
}
console.log(num);////（选中了最后一个）3-全部勾选-勾选全选 （之前全部勾选，取消了任意一个勾选） 1-取消全选的勾选
if(num==3||(num==1&&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++){
this.list[i]['check']=this.checkAll;
}
}
this.smallHand=false;
}
}
})
JS部分补充说明：上面的代码在删除时没办法继续“全选”的同步,而且这里数字被写死是错误的（ if(num==3||(num==1&&indexItem.check==false)){ ）。
更新改进后的代码如下：
var app=new Vue({
el:'#app',
data:{
list:[
{
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
}
],
checkAll:false,
smallHand:false
},
computed:{
totalPrice:function(){
this.newList=this.list.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个数字字符串结尾的字符
*/
}
},
methods:{
handleReduce:function(index){
if(this.list[index].count===1) return;
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
var num=0;
var allNum=0;
for(var i=0;i<this.list.length;i++){
var item=this.list[i];
allNum++;
if(item.check){
num++;
}else{
num--;
}
}
if(num==allNum){
this.checkAll=true;
}else{
this.checkAll=false;
}
},
isAll:function(index){
console.log(this.list[index].check);
var indexItem=this.list[index];
indexItem.check=!indexItem.check;
var num=0;
var allNum=0;
for(var i=0;i<this.list.length;i++){
var item=this.list[i];
allNum++;
if(item.check){
num++;
}else{
num--;
}
}
console.log(num);////（选中了最后一个）3-全部勾选-勾选全选 （之前全部勾选，取消了任意一个勾选） 1-取消全选的勾选
// if(num==3||(num==1&&indexItem.check==false)){ 这里不能写死的傻瓜
if(num==allNum||(num==(allNum-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++){
this.list[i]['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购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
- Js 实战3（实现全选）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs ...
- js实现简单的菜谱全选功能
思路:全选按钮和子按钮分开考虑,当全选按钮选中的时候,也就是其checked为true的时候,所有的子按钮也全都为true,反之,则为false.子按钮的想法是,当点击某一个子按钮的时候,会看一下是否 ...
- 分享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 版本会在 ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- jquery与js实现全选功能的区别---2017-05-12
一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...
- JS实现全选功能
000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...
- vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
随机推荐
- c# 扩展方法初见理解
个人理解扩展方法是对某些类在不改变源码的基础上添加其他的方法.扩展方法必须是在非泛型的静态类里定义,且第一个参数是要使用this 指定需要扩展的类型. class Program { static v ...
- Java开发笔记（十五）短路逻辑运算的优势
前面提到逻辑运算只能操作布尔变量,这其实是不严谨的,因为经过Java编程实现,会发现“&”.“|”.“^”这几个逻辑符号竟然可以对数字进行运算.譬如下面的代码就直接对数字分别开展了“与”.“或 ...
- JavaScript 的 4 种数组遍历方法： for VS forEach() VS for/in VS for/of
我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑.Airbnb 编码风格禁止使用 for/in 与 for/of,你知道为什么吗? 这篇文章将详细介绍以下 4 ...
- float浮动-清浮动BFC渲染机制
float浮动,用于横向布局. 起初的横向布局都用display:inline-block,但是这会导致两个元素之间有空隙,而这是由代码换行解析成空格的,解决元素间有空隙,空格:font-size:0 ...
- i的二次幂求和
\(i^2\)求和 老祖宗告诉我们\(\sum_{i=1}^n i^2 = \frac{n(n+1)(2n+1)}{6}\) 但是这玩意儿是怎么出来的呢?感觉网上用立方差证明的思路太low了,今天偶然 ...
- 使用docker部署skywalking
使用docker部署skywalking Intro 之前在本地搭建过一次 skywalking + elasticsearch ,但是想要迁移到别的机器上使用就很麻烦了,于是 docker 就成了很 ...
- swiper 自定义分页器的使用
网上关于swiper 自定义分页器的方法比较多,但是已经不适合使用.它的API又比较坑爹,什么都是点到为止,不说清楚.因为要做一个产品颜色切换的效果,有黑与白两种颜色,因此尝试使用Swiper的自定义 ...
- github、git软件安装、pycharm下使用git配置、git GUI相关
1.GitHub: 官网:直接搜索,排名很靠前,需要注册: 注册完之后,会有指引.新建项目两个选项(看不懂的问YOUDAO等翻译软件啦,大段复制进去就行) 2.Git安装: (https://git- ...
- ext图片预览功能实现，前端代码
效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...
- Python运算符之翩若惊鸿，婉若游龙
python中的运算符算术运算符:主要用于两个对象算数计算(加减乘除等运算)比较运算符:用于两个对象比较(判断是否相等.大于等运算)赋值运算符:用于对象的赋值,将运算符右边的值(或计算结果)赋给运算符 ...