<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 安装并启动 ...
随机推荐
- maven 配置（cmd 黑窗口执行 mvn 时默认的 settings 文件和 idea maven 相关配置）
写在前面: 本文章用于记录博主平时遇到的问题,步骤略粗糙,目的在于记录一边后续博主自己查找,如果能帮助到其他人更好.文章中用到的链接均为自行引入,侵删,谢谢(2I2Rc*@JY8) 问题说明:在一次使 ...
- 2023-12-09：用go语言，给你两个整数数组 arr1 和 arr2， 返回使 arr1 严格递增所需要的最小「操作」数（可能为 0）。 每一步「操作」中，你可以分别从 arr1 和 arr2
2023-12-09:用go语言,给你两个整数数组 arr1 和 arr2, 返回使 arr1 严格递增所需要的最小「操作」数(可能为 0). 每一步「操作」中,你可以分别从 arr1 和 arr2 ...
- Head First Java学习：第十一章-异常处理
第十一章 异常处理 1.方法可以抓住其他方法所抛出的异常:异常总是丢回给调用方 有风险.会抛出异常的程序代码: 负责声明异常:创建Exception对象并抛出 调用该方法的程序代码: 在try中调用程 ...
- UI自动化测试框架：数据驱动
一.UI自动化框架介绍 测试框架使用了Po设计模式(Page Object),每一个页面用一个类来对应,这个类里面要实现所有核心页面元素的获取方法,类里面提供操作页面元素的所有方法. 这个框架实现几点 ...
- FOJ有奖月赛-2015年11月 Problem A
Problem A 据说题目很水 Accept: 113 Submit: 445Time Limit: 1000 mSec Memory Limit : 32768 KB Problem ...
- 5分钟攻略Spring-Retry框架实现经典重试场景
前言 今天分享干货,控制了篇幅,5分钟内就能看完学会. 主题是Spring-Retry框架的应用,做了一个很清晰的案例,代码可下载自测. 框架介绍 Spring-Retry框架是Spring自带的功能 ...
- Python——第三章：内置函数（上）
Python中的内置函数 基础数据类型相关(38) 和数字相关(14) 数字类型(4) bool--布尔型 int--整型 float--浮点型 complex--虚数 机制转换(3) bin--二进 ...
- 当创建一个ingress后，kubernetes会发什么？
本文分享自华为云社区<当创建一个ingress后,kubernetes会发什么?>,作者:可以交个朋友. 一.Ingress概述 Ingress是一组路由转发规则合集,将集群内部服务通过7 ...
- Asp .Net Core系列：AutoMapper自动映射框架介绍、使用
1.介绍 AutoMapper是一个对象-对象映射器.对象-对象映射通过将一种类型的输入对象转换为另一种类型的输出对象来工作.使AutoMapper变得有趣的是,它提供了一些有趣的约定,以免去搞清楚如 ...
- 带你了解NB-IoT标准演进
摘要:本文将带大家详细了解NB-IoT标准演进与产业发展. 本文分享自华为云社区<一文带你了解NB-IoT标准演进与产业发展>,作者:万万万. 我们都知道,物联网的场景和手机.电脑在使用的 ...