Vue-购物车实战
computed 计算属性
正则
css部分
[v-cloak] {
display : none ;
}
table{
border : lpx solid #e9e9e9 ;
border- collapse: collapse ;
border-spacing : 0;
empty-cells : show ;
}
th , td{
padding : Spx 16px ;
border : lpx solid #e9e9e9 ;
text-align : left;
}
th{
background: #f7f7f7 ;
color : #5c6b77 ;
font-weight: 600 ;
wh te-space: nowrap ;
}
.checks {
font-size: 16px;
text-align: center;
}
Js部分
var app = new Vue({
el: '#app',
data:{
checkall: false,
list:[
{
title_name: '手机',
content: [
{ id: 1, name: '小米9', price: 3099, count: 9, check: false,
},
{ id: 2, name: '华为30', price: 4888, count: 1, check: false,
},
{ id: 3, name: 'Vivo20', price: 3199, count: 1, check: false,
},
]
},
{
title_name: '日常用品',
content: [
{ id: 1, name: '牙刷', price: 88, count: 1, check: false,
},
{ id: 2, name: '毛巾', price: 58, count: 1, check: false,
},
{ id: 3, name: '口杯', price: 28, count: 1, check: false,
},
]
},
{
title_name: '学习用品',
content: [
{ id: 1, name: '签字笔', price: 18, count: 1, check: false,
},
{ id: 2, name: '橡皮', price: 8, count: 1, check: false,
},
{ id: 3, name: '笔记本', price: 2, count: 1, check: false,
},
]
},
],
},
computed:{
totalPrice: function(){
var total = 0;
for( var i = 0; i < this.list.length; i++){
var item = this.list[i];
for(var j = 0; j<item.content.length; j++){
var items = item.content[j];
if(items.check === true){
total += items.price * items.count;
}
}
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,','); //3位式显示金额
},
},
methods:{
handleReduce: function(index1, index2){
if(this.list[index1].content[index2].count === 1) return; //商品数量等于‘1’时，关闭按钮
this.list[index1].content[index2].count--; //商品数量减一
},
handleAdd: function(index1, index2){
this.list[index1].content[index2].count++; //商品数量加一
},
handleRemove: function(index1, index2){
this.list[index1].content.splice(index2, 1);
},
handleChecked:function(index1,index2){
this.list[index1].content[index2].check = !this.list[index1].content[index2].check
if(this.list[index1].content[index2].check === false){
this.checkall = false;
};
var checkallkey = true;
for(var i=0;i<this.list.length;i++){
for(var j=0;j<this.list[i].content.length;j++){
if(this.list[i].content[j].check === false) checkallkey = false;
}
}
this.checkall = checkallkey;
},
handleAllChecked: function(){ //全选 or 取消全选
if(this.checkall === false){
for(var i=0; i<this.list.length; i++){
for(var j=0; j<this.list[i].content.length; j++){
this.list[i].content[j].check = true;
}
}
this.checkall = true;
}
else if(this.checkall === true){
for(var i=0; i<this.list.length; i++){
for(var j=0; j<this.list[i].content.length; j++){
this.list[i].content[j].check = false;
}
}
this.checkall = false;
}
},
},
});
HTML 部分 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>购物车实战</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head>
<body>
<div id="app" v-cloak>
<template v-if="list.length"> <!-- <template>里的代码分两部分， 一部分是商品列表信息，我们用表格 table 来展现：
另一部分就是带有千位分隔符的商品总价（每隔三位数加进一个逗号〉。这部分代码如下： -->
<table border="" cellspacing="" cellpadding="">
<thead>
<tr>
<th><input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()" /></th>
<th>商品编号</th>
<th>商品价格</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 循环list --> <tr v-for="(item,index) in list"> <td><input type="checkbox" :value="item" v-model="checkedData" /></td>
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button @click="handleReduce(index)"
:disabled="item.count === 1">-</button>
{{ item.count }}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div class="checks">
<div>总价:¥ {{ totalPrice }}</div>
<br>
<span >
选择的值为:
<tr >
<td>{{ checkedData }}</td>
</tr>
</span>
</div> </template>
<div v-else>购物车空了，添加一些商品吧</div>
</div>
<!-- 注意，这里将vue.min. js ,index.js
文件写在＜body 的最底部，如果写在＜head＞里 Vue 实例将无法创建，
因为此时 DOM 还没有被解析完成，除非通过异步或在事件
DOMContentLoaded (IE 是onreadystatechange ）
触发时再创建 Vue 实例，这有点像 jQuery 的$（document).ready（）方法。 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
Vue-购物车实战的更多相关文章
- vue购物车实战项01
1. 关于挂载点 2.图片路径 这样的引入方式 是直接文件夹下myVue 3.import 不能用绝对路径 只能用相对路径 图片可以绝对路径 4.引入组件步骤 1.引入组件 @的含义在配置里面可以 ...
- vue购物车实战项02
1.数据循环.绑定 v- 绑定的属性 都是变量 ( 小程序这块需要花括号 不同点) 2.列表点击 当绑定变量为一个对象的时候{} 属性根据里面的属性值 bool 值 是否返回 当前的属性 转化成cl ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- 【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前端实战注意事项
1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关 ...
- vue项目实战
本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...
随机推荐
- Java服务发起HTTPS请求报错：PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException
Java服务发起HTTPS请求报错:PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderExcept ...
- 从Purge机制说起，详解GaussDB(for MySQL)的优化策略
本文分享自华为云社区<[华为云MySQL技术专栏]GaussDB(for MySQL) Purge优化>,作者:GaussDB 数据库. 在MySQL中,尤其是在使用InnoDB引擎时,P ...
- HTML5画布-小球碰撞
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` HTML5画布-小球碰撞 日期:2017-7-18 阿珏 ...
- getRefs is undefined html vue2项目 报错
vue2项目提示 getRefs is undefined 在div上面写了,ref,还写了v-if 然后再watch中操作了 ref 导致报错. 分析: 组件因为v-if 为 false 没有注册和 ...
- python重拾第六天-面向对象基础
本节内容: 面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法. 引子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的 ...
- Android 7.0 开机时间优化
原文参考(有删改):https://www.jianshu.com/p/6dba42c022a9 问题描述 开机时间相对参考机过慢,大约慢15s左右.Android 系统7.0. 问题分析 开机问题涉 ...
- Android 通过odex优化提高首次开机速度
背景 客户反馈说开机时间过长,需要优化. 原文:https://blog.csdn.net/croop520/article/details/73930184 介绍 现在很多Android都需要预装很 ...
- C#中关于 object,dynamic 一点使用心得
首先说一下使用场景 WebAPI接口入参使用 object和 dynamic 后续解析和处理 1.object和dynamic 区别 在.NET中,object和dynamic也有一些区别: obj ...
- 韦东山freeRTOS系列教程之【第八章】事件组(event group)
目录 系列教程总目录 概述 8.1 事件组概念与操作 8.1.1 事件组的概念 8.1.2 事件组的操作 8.2 事件组函数 8.2.1 创建 8.2.2 删除 8.2.3 设置事件 8.2.4 等待 ...
- 6.Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求. 因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可. 不过,字符串拼接麻烦且易错.因此,在 ...