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 ...
随机推荐
- 论文解读（APCA）《Adaptive prototype and consistency alignment for semi-supervised domain adaptation》
[ Wechat:Y466551 | 付费咨询,非诚勿扰 ] 论文信息 论文标题:Adaptive prototype and consistency alignment for semi-super ...
- 从浅入深了解.NET Core MVC 2.x全面教程
一.基础 1.默认配置 使用Kestrel Web Server ASP.NET Core内置--跨平台 IIS集成 UseIIS() UseIISIntergration() Log IConfig ...
- VMware虚拟机的安装与配置
一.VMware简介 VMware Workstation Pro 是业界标准的桌面 Hypervisor,用于在 Linux 或 Windows PC 上运行虚拟机. Workstation 16 ...
- WPF 入门笔记 - 07 - MVVM示例
滴咚,大家好久不见.好就没写东西了,鸽着鸽着就无了... 回到正题,上篇文章说完命令提了一嘴MVVM模式直接就上MVVMLight这些程序的框架了,虽然也没说多少,但还是有点不好过渡,这篇对MVVM做 ...
- Stable Diffusion基础：ControlNet之图片风格迁移
今天继续给大家分享AI绘画中 ControlNet 的强大功能,本次的主角是 Reference,它可以将参照图片的风格迁移到新生成的图片中,这句话理解起来很困难,我们将通过几个实例来加深体会,比如照 ...
- Pandas 使用教程 Series、DataFrame
目录 Series (一维数据) 指定索引值 使用 key/value 对象,创建对象 设置 Series 名称参数 DataFrame(二维数据) 使用字典(key/value)创建 loc 属性返 ...
- Lazada商品详情（代码封装）以及应用
编辑切换为居中 Lazada平台的分析可以从以下几个方面入手: 1. 市场分析:对Lazada平台市场进行分析,及时了解市场趋势和变化,调整企业的经营策略.可以监测Lazada平台上商品的销售量. ...
- mpi转以太网连接300PLC实现以太网通信配置方法
西门子S7300PLC连接MPI-ETH-XD1.0实现以太网通信配置方法 产品简介 兴达易控MPI-ETH-XD1.0用于西门子S7-200/SMART S7-200/S7-300/S7-400/西 ...
- SonarQube系列-认证&授权的配置
参考文档:https://docs.sonarqube.org/latest/instance-administration/security/ 概述 SonarQube具有许多全局安全功能: 认证和 ...
- Android应用中对于微信分享的实例及问题
源码地址 如何分享 分享无相应 分享结果如何接收响应 微信 分享回调 (提示几点关键问题: debug_key 一定要获得对应的签名码 然后和weixin官网的appid对应 ) 几点注意 ...