代码结构

一、     效果

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、购物车样例>的更多相关文章

  1. 简单物联网:外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 使用MapStruct出现了No property named "productId" exists in source parameter(s). Type "Product" has no properties.

    pom.xml <properties> <maven.compiler.source>17</maven.compiler.source> <maven.c ...

  2. Codeforces Round #426 (Div. 2) problem B

    B. The Festive Evening time limit per test 1 second memory limit per test 256 megabytes input standa ...

  3. 从零开始用 Axios 请求后端接口

    对于前端同学来说,请求后端接口是一个非常通用的东西.在十几年前的时候,我们还用 Ajax 去请求后端接口.但在 2023 年的今天,很多框架都很成熟了,我们有了更加快捷的方式 -- Axios 框架. ...

  4. vivo 容器平台资源运营实践

    作者:vivo 互联网服务器团队 - Chen Han 容器平台针对业务资源申请值偏大的运营问题,通过静态超卖和动态超卖两种技术方案,使业务资源申请值趋于合理化,提高平台资源装箱率和资源利用率. 一. ...

  5. ES集群搭建和Kibana管理集群

    搭建实例 先复制2份解压后的完整目录,将里面的data和log删除. elasticsearch-6.8.23-node2 elasticsearch-6.8.23-node3 修改3个实例的配置文件 ...

  6. awk所有常用语法

    awk [OPTIONS] PROGRAM FILE... 选项: -F 指定分隔符 -f 引用awk脚本 -v VAR=VALUE 定义一个变量传递给PROGRAM,但是这里的变量BEGIN读不了, ...

  7. android ProgressBar样式

    实现进度条由浅黄(#ffff33)到深黄色(#ff6600)的渐变样式. 与进度条自动从0加载到99,进度条每次加1 android:max:进度条的最大值. android:progressDraw ...

  8. win11 右击还原 win10的

    以管理员身份 打开 powershell, 然后输入如下代码 .\reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a ...

  9. Java数组中常见的方法

    一.前言 代码: //给定一个数组 int[] arr = {234,312,32,1321,321,43}; int[] arr1 = new int[6]; int[] arr2 = {1,3,7 ...

  10. [Python急救站]百钱买百鸡

    百钱买百鸡:一人用100元买了100只鸡,其中公鸡5元一只,母鸡3元一只,小鸡1元一只.问:公鸡.母鸡.小鸡各多少只? 程序采用穷举法. for x in range(1, 21): for y in ...