<vue 基础知识 8、购物车样例>
代码结构
一、 效果
1、 展示列表v-for
2、 购买数量增加减少，使用@click触发回调函数。
减少的时候如果已经为1了就不让继续减少，使用了v-bind绑定属性
3、 移除也是使用@click触发回调函数。
4、 总价和价格里前面增加一个￥使用了过滤器
5、 总价的计算使用了计算属性
二、代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <div id="app">
<div v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" >
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)" :disabled="item.count===1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价: {{totalPrice | showPrice}}</div>
</div>
<div v-else>购物车为空</div>
</div> <script src="vue.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
let app = new Vue({
el: '#app',
data: {
list: [
{
id: 1,
name: '《三国演义》',
date: '1985-9',
price: 100.00,
count: 1
},
{
id: 2,
name: '《红楼梦》',
date: '1965-2',
price: 20.00,
count: 1
},
{
id: 3,
name: '《西游记》',
date: '1983-10',
price: 30.00,
count: 1
},
{
id: 4,
name: '《水浒传》',
date: '1981-3',
price: 145.00,
count: 1
},
]
},
methods: {
decrement(index) {
this.list[index].count--;
},
increment(index) {
this.list[index].count++;
},
handleRemove(index) {
this.list.splice(index, 1);
}
},
filters: {
showPrice(value) {
return '¥' + value.toFixed(2)
}
},
computed: {
totalPrice() {
let total = 0;
//方法一
for (let i = 0; i < this.list.length; i++) {
let item = this.list[i];
total += item.price * item.count;
}
return total
}
}
})
style.css
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
<vue 基础知识 8、购物车样例>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- GKCTF2020WP-Crypto Misc
Crypto 小学生的密码学 题目 e(x)=11x+6(mod26) 密文:welcylk (flag为base64形式) 我的解答: 考点:仿射密码,已知a,b 结果base64加密即可 flag ...
- erp——绩效考核系统——数据需求说明书
绩效考核--数据需求说明书 1.引言 1.1编写目的 数据要求说明书详细的提供了系统中各个数据的流向,是设计数据库的关键所在,为以后的编码以及测试提供一份可靠的依据. 1.2 对象 本<数据要求 ...
- 蓝桥杯-最短路 （SPFA算法学习）
SPFA算法主要用来解决存在负边权的单源最短路情况(但不能有负环!!!)一个简单的方法判断是否有没有负环可以通过判断是否有一个节点是否频繁进出队列. 以下内容转自https://blog.csdn.n ...
- 使用kubeadm在Centos8上部署kubernetes1.18
// 查看系统版本 cat /etc/centos-release CentOS Linux release 8.1.1911 (Core) // 如果系统环境为8.0(云服务器默认最大安装环境为8. ...
- zabbix-server 报错记录
数据库磁盘满导至zabbix挂了 登陆zabbix页面提示错误信息,查看系统磁盘: /目录已满,导致mariadb数据库无法正常运行,如果有介质将会一直收取: 解决方法:扩容/目录,达到理想值,重启m ...
- 如何在IIS上部署docsify以及404问题
操作步骤 创建一个文件夹,在文件夹中新建2个文件 index.html:入口文件,整个网站只需要这个html文件,其他文件都是md文件 README.md:主页内容,如果没有这个文件,访问时提示404 ...
- GaussDB技术解读系列丨运维自动驾驶探索
本文分享自华为云社区<DTCC 2023专家解读 | GaussDB技术解读系列之运维自动驾驶探索>,作者:GaussDB 数据库 . 近日,在第14届中国数据库技术大会(DTCC2023 ...
- 视频编码耗时长、编码帧发送失败…DVPP视频编码问题典型案例分析
摘要:本期就分享几个关于DVPP视频编码问题的典型案例,并给出原因分析及解决方法 本文分享自华为云社区<DVPP媒体数据处理视频编码问题案例>,作者:昇腾CANN. DVPP(Digita ...
- 关于GaussDB(DWS)的正则表达式知多少？人人都能看得懂的详解来了！
摘要:GaussDB(DWS)除了支持标准的POSIX正则表达式句法,还拥有一些特殊句法和选项,这些你可了解?本文便为你讲解这些特殊句法和选项. 概述 正则表达式(Regular Expression ...
- 数仓ETL系统：给强大的“心脏”配上“超级流水线”
摘要:在数据仓库平台建设过程中,数据的加载.卸载,各层数据模型之间的数据流转,业务规则的实现等等数据加工过程都会以ETL任务的方式实现. 一.前言 在数据仓库平台建设过程中,数据的加载.卸载,各层数据 ...