<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 安装并启动 ...
随机推荐
- ubuntu20.04安装goaccess实时对nginx日志进行分析
ubuntu20.04安装goaccess实时对nginx日志进行分析 goaccess可以对nginx日志进行分析,生成实时动态页面,同时通过nginx反向代理来解决WebSocket数据传输问题. ...
- 目标检测工具安装使用--labelImg
如果想要在深度学习中训练我们自己的模型,就得对图片进行标注.labelImg是一个超级方便的目标检测图片标注工具,打开图片后,只需用鼠标框出图片中的目标,并选择该目标的类别,便可以自动生成voc格式的 ...
- 后端程序员必会的前端知识-03：Vue2
三. Vue 2 1. Vue 基础 1) 环境准备 安装脚手架 npm install -g @vue/cli -g 参数表示全局安装,这样在任意目录都可以使用 vue 脚本创建项目 创建项目 vu ...
- 基于Docker Desktop搭建Kafka集群并使用Java编程开发
一.引言 前段时间因课业要求使用Docker Desktop 部署Kafka集群并编写生产者消费者程序,折磨了我好几天,在查找大量资料后终于是把整个集群搭建完成了.现在我想要分享其中搭建的历程,希望能 ...
- 开源.NetCore通用工具库Xmtool使用连载 - 图像处理篇
[Github源码] <上一篇> 介绍了Xmtool工具库中的扩展动态对象,今天我们继续为大家介绍其中的图像处理类库. 在我们的软件系统中,经常需要对图片进行各种各样的处理:例如最常见的头 ...
- 记一次 .NET某工控 宇宙射线 导致程序崩溃分析
一:背景 1. 讲故事 为什么要提 宇宙射线, 太阳耀斑 导致的程序崩溃呢?主要是昨天在知乎上看了这篇文章:莫非我遇到了传说中的bug? ,由于 rip 中的0x41变成了0x61出现了bit位翻转导 ...
- java方法的定义与执行
java中的方法在类中定义. 定义方法格式: 访问修饰符 返回值类型 方法名(参数列表){ ... 执行内容 ... return 返回值; } 访问修饰符:表示方法在哪里能被 ...
- DVWA File Upload（文件上传）全等级
File Upload(文件上传) 目录: File Upload(文件上传) 一句话木马的构成 1. Low 1.上传一句话木马1.php 2.中国蚁剑 2.Medium 3. High 4.Imp ...
- SQLServer清空数据库日志
-------SQl2008以上 清空日志-------- USE[master] GO ALTER DATABASE [数据库名称] SET RECOVERY SIMPLE WITH NO_WAIT ...
- 在ubuntu下将virtualbox虚拟机的磁盘重设大小的方法
1.VBoxManage modifyhd /home/beyond/xxx.vdi --resize 20480 {20480(单位:M)是你要扩容之后的总大小,/home/beyond 是你存放 ...