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 ...
随机推荐
- Go 语言入门指南: 环境搭建、基础语法和常用特性解析 ｜ 青训营
Go 语言入门指南: 环境搭建.基础语法和常用特性解析 | 青训营 从零开始 Go 语言简介 Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert ...
- Web攻防--xxe实体注入
web攻防--xxe实体注入 漏洞简介 XML 外部实体注入(也称为 XXE)是一种 Web 安全漏洞,允许攻击者干扰应用程序对 XML 数据的处理.它通常允许攻击者查看应用程序服务器文件系统上的文件 ...
- [Lua][Love] "图块集与地图" 加载显示功能 TileMap
效果 安装库 安装两个库,分别用来读xml和csv,如果有luarocks,执行下列命令 luarocks install xml2lua luarocks install ftcsv manoelc ...
- Pandas 使用教程 CSV
CSV(Comma-Separated Values,逗号分隔值,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本). CSV 是一种通用的.相对简单的文 ...
- 数据可视化【原创】vue+arcgis+threejs 实现海量建筑物房屋渲染，性能优化
本文适合对vue,arcgis4.x,threejs,ES6较熟悉的人群食用. 先报备一下版本号 "vue": "^2.6.11" "@arcgis/ ...
- torch-1 tensor & optim
开个新坑, pytorch源码阅读-从python代码开始读起. torch/ 1.tensor.py 继承自torch._C._TensorBase , 包括各种操作,TODO:随后看cpp代码 _ ...
- Tongweb远程调试
最近,在对项目进行国产化时,要求springboot项目容器换成tongweb.在部署中,有个问题一直无法在本地重现,搜了下网上资料,基本没法实现,所以我整理了下.注意,项目包代码必须与本地代码保持一 ...
- 【目标检测】RCNN算法实现
一.前言 RCNN(Regions with CNN features)算法由Ross Girshick在2014年的论文"Rich feature hierarchies for accu ...
- Github、Gitee优秀的开源项目
收集 Github.Gitee优秀的开源项目,并进行归类整理.项目地址 目录 编程语言项目 SprinBoot 项目 源码分析项目 前后端分离项目 Vue2 项目 Vue3 项目 微服务项目 Api ...
- git升级编译安装
一.删除旧版本git 方法一. yum remove git -y (centos环境) apt-get remove git -y (Ubuntu环境) 方法二. which git [root@p ...