<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 安装并启动 ...
随机推荐
- LeetCode-Java：122. 买卖股票的最佳时机Ⅱ
题目 给你一个整数数组 prices ,其中 prices[i] 表示某支股票第 i 天的价格. 在每一天,你可以决定是否购买和/或出售股票.你在任何时候 最多 只能持有 一股 股票.你也可以先购买, ...
- jmeter--jsr223组件使用和功能详解
相比于BeanShell 取样器,JSR223取样器具有可大大提高性能的功能(编译)如果需要,一定要使用JSR223取样器编写脚本是更好的选择!!! 属性描述名称:显示的此取样器的描述性名称,可自定义 ...
- [CF1748D] ConstructOR
题目描述 You are given three integers $ a $ , $ b $ , and $ d $ . Your task is to find any integer $ x $ ...
- ezbypass-cat【目录穿透】
ezbypass-cat[目录穿透][难度:4] 题目界面 尝试SQL注入无果,看题解发现是目录穿透,需要抓包才能得到flag. 解题步骤 随便输入用户名和密码抓包 更改请求方式(POST→GET), ...
- bash shell笔记整理——which和whereis命令
which和whereis命令作用 which:显示给定命令所在路径 whereis:相比which更完善,显示命令路径.man文件路径(如果有).源代码路径 which语法 which [optio ...
- 在Linux服务器上装jenkins（方式一：war包）
官网下载jenkins https://www.jenkins.io/zh/download/ 官网下载太慢,可以去清华镜像下载(百度搜索:清华镜像) 下载的文件是jenkins.war 把安装文件放 ...
- Win10遇到服务器启动失败 80端口被占用如何解决
Win10提示"服务器启动失败,80端口被占用"怎么办?具体解决方法如下 步骤如下: 1.以管理员身份运行cmd; 2.输入:net stop http 注:如果提示是否真的需要停 ...
- Sliver 二开准备
cs被杀麻了,最近打算看看一下sliver的源码进行一下二开,这篇是记录遇到的一些问题 编译sliver Windows下 官方说用MingW,但是我自己用他带的make不行, 下载make ...
- 神经网络优化篇：详解神经网络的权重初始化（Weight Initialization for Deep NetworksVanishing / Exploding gradients）
神经网络的权重初始化 这是一个神经单元初始化地例子,然后再演变到整个深度网络. 来看看只有一个神经元的情况,然后才是深度网络. 单个神经元可能有4个输入特征,从\(x_{1}\)到\(x_{4}\), ...
- 聊聊ChatGLM6B的微调脚本及与Huggingface的关联
本文首先分析微调脚本trainer.sh的内容,再剖析ChatGLM是如何与Huggingface平台对接,实现transformers库的API直接调用ChatGLM模型,最后定位到了ChatGLM ...