Vue02-小案例（购物车功能）
效果图
主要代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-collapse: collapse;
/* text-align: center; */
}
thead {
background-color: #f5f5f5;
}
th, td {
border: 1px solid #aaa;
padding: 8px 16px;
}
.active {
background-color: skyblue;
}
</style>
</head>
<body>
<div id="app">
<template v-if="books.length">
<table>
<thead>
<tr>
<th>序号</th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books"
:key="index"
@click="liClick(index)" :class="{active : index===currentIndex }">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.date}}</td>
<td>{{formatPrice(book.price)}}</td>
<td>
<button :disabled="book.count <= 1"
@click="countMinus(index)">
-
</button>
{{book.count}}
<button @click="countAdd(index)">+</button>
</td>
<td>
<button @click="removeBook(book,index)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价：{{formatPrice(total)}}</h2>
</template>
<template v-else>
<h2>当前购物车数量为空！</h2>
</template>
</div>
<script src="vue.js"></script>
<script src="data.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
books,
currentIndex:0
}
},
computed: {
total() {
// 1. 遍历books
let price = 0
for (const item of this.books) {
price += item.price * item.count
}
return price
}
},
methods:{
formatPrice(price){
return '￥' + price
},
countAdd(bookId){
this.books[bookId].count ++
},
countMinus(bookId){
this.books[bookId].count --
},
removeBook(book,index){
this.books.splice(index, 1)
},
liClick(index){
this.currentIndex = index
}
},
})
app.mount('#app')
</script>
</body>
</html>
数据文件
data.js
const books = [
{
id: 1,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count: 1
},
{
id: 2,
name: '《UNIX编程艺术》',
date: '2006-2',
price: 59.00,
count: 1
},
{
id: 3,
name: '《编程珠玑》',
date: '2008-10',
price: 39.00,
count: 1
},
{
id: 4,
name: '《代码大全》',
date: '2006-3',
price: 128.00,
count: 1
},
{
id: 5,
name: '《你不知道JavaScript》',
date: '2014-8',
price: 88.00,
count: 1
},
]
Vue02-小案例（购物车功能）的更多相关文章
- 微信小程序购物车功能
<view class='shop-mana'> <text class='management'>管理您的购物车</text> <text class='g ...
- Session小案例-----简单购物车的使用
Session小案例-----简单购物车的使用 同上篇一样,这里的处理请求和页面显示相同用的都是servlet. 功能实现例如以下: 1,显示站点的全部商品 2.用户点击购买后,可以记住用户选择的商品 ...
- 微信小程序之购物车功能
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...
- [转]微信小程序之购物车功能
本文转自:https://www.cnblogs.com/linxin/p/6834206.html 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法 ...
- 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能
效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 【微信小程序】转载：微信小程序之购物车功能
前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...
- 微信小程序实战 购物车功能
代码地址如下:http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/ ...
- python购物车小案例
python购物车小案例# 案列描述:有一个小型水果店里面有水果(苹果:¥8/kg,香蕉:¥5/kg,芒果:¥15/kg,葡萄:¥12/kg),客户带了100元钱进店选购水果.# 1.客户输入相应序号 ...
- WEB 小案例 -- 网上书城（四）
针对于这个小案例我们今天讲解结账操作,也是有关这个案例的最后一次博文,说实话这个案例的博文写的很糟糕,不知道该如何去表述自己的思路,所以内容有点水,其实说到底还是功力不够. 处理思路 点击结账,发送结 ...
- Session与Cookie的原理以及使用小案例>从零开始学JAVA系列
目录 Session与Cookie的原理以及使用小案例 Cookie和Session所解决的问题 Session与Cookie的原理 Cookie的原理 Cookie的失效时机 小提示 Session ...
随机推荐
- Unity三维数学总结
三维向量和三角函数 三维向量 向量是指一个同时具有大小和方向,且满足平行四边形法则的几何对象. 向量的模 po点相对于世界坐标原点的距离: po.magnitude. 标准向量,归一向量,指的是将 ...
- [django]数据的导入和导出
除了使用mysqldump或者MySQL客户端进行数据导出,django也提供了类似的功能. 导出 # 导出整个数据库并保存为json文件 python manage.py dumpdata > ...
- __wakeup()魔术方法绕过（CVE-2016-7124）
__wakeup()魔术方法绕过(CVE-2016-7124) 漏洞简介 在php反序列化数据过程中,如果类中存在__wakeup方法,调用 unserilize() 方法前则先调用__wakeup方 ...
- SpringBoot3集成ElasticSearch
目录 一.简介 二.环境搭建 1.下载安装包 2.服务启动 三.工程搭建 1.工程结构 2.依赖管理 3.配置文件 四.基础用法 1.实体类 2.初始化索引 3.仓储接口 4.查询语法 五.参考源码 ...
- 使用kube-bench检测Kubernetes集群安全
目录 一.系统环境 二.前言 三.CIS (Center for Internet Security)简介 四.什么是Kube-Bench? 五.使用kube-bench检测不安全的设置 5.1 手动 ...
- 通过API接口获取到数据后的使用方法以及储存方法
API接口是许多应用程序和服务所必需的,可以将多个应用程序连接起来,允许不同应用程序之间的数据共享.在本文中,我们将探讨如何使用API接口获取数据,以及如何储存这些数据. 1.使用API接口获取数据 ...
- 吃透单调栈（2）——解两道Hard题：接雨水、柱状图中最大的矩形问题
怎么想到要用单调栈的? 这类题目的数据通常是一维数组,要寻找任一个元素的右边或者左边第一个比自己大或者小的元素的位置(寻找边界),此时我们就要想到可以用单调栈了. 42. 接雨水 这道题就是要求解每一 ...
- TypeScript中Class基础使用
TypeScript是一种静态类型的JavaScript超集,它提供了许多增强的功能,其中之一就是对面向对象编程的支持.在TypeScript中,我们可以使用Class来定义类,这使得我们能够更加结构 ...
- 拓展kmp的应用
Smiling & Weeping ---- 我与月亮,进行了一次深夜谈话 它与我谈论太阳,而我与它谈论你. 题目链接:P3435 [POI2006] OKR-Periods of Words ...
- Go 基础之基本数据类型
Go 基础之基本数据类型 目录 Go 基础之基本数据类型 一.整型 1.1 平台无关整型 1.1.1 基本概念 1.1.2 分类 有符号整型(int8~int64) 无符号整型(uint8~uint6 ...