vue--购物车案例（小知识点总结）
Html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./main.css"> </head>
<div id="app">
<div v-if="books.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 books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data}}</td>
<!-- <td>{{getFinalPrice(item.price)}}</td> -->
<td>{{item.price| showPrice}}</td>
<td>
<button @click="inc(index)" :disabled="item.count <=1 ">-</button>
{{item.count}}
<button @click="add(index)">+</button>
</td>
<td><button @click="removeHandle(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格:{{totalPrice|showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div> <body>
<script src="../js/vue.js"></script>
<script src="./main.js"></script>
</body> </html>
CSS
table{
border:1px solid #000;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border:1px solid #000;
text-align:left;
}
th{
background-color: #f7f7f7;
color:#5c6b77;
font-weight:600px;
}
JavaScript
const app = new Vue({
el: '#app',
data: () => ({
books: [
{
id: 1,
name: '《算法导论》',
data: "2018-09-25",
price: 89.00,
count: 1
},
{
id: 2,
name: '《UNIX编程艺术》',
data: "2018-09-25",
price: 89.00,
count: 1
},
{
id: 3,
name: '《编程珠玑》',
data: "2018-09-25",
price: 89.00,
count: 1
},
{
id: 4,
name: '《JavaScript高级算法》',
data: "2018-09-25",
price: 89.00,
count: 1
},
{
id: 5,
name: '《C++》',
data: "2018-09-25",
price: 89.00,
count: 1
}
],
}),
computed: {
totalPrice: function () {
// 1、
// let totalPrice = 0
// for (let i = 0; i < this.books.length; i++) {
// totalPrice +=this.books[i].price * this.books[i].count
// }
// return totalPrice
// 2、
// let totalPrice = 0;
// for (let i in this.books) {
// totalPrice += this.books[i].price * this.books[i].count
// }
// return totalPrice
// 3、
let totalPrice = 0
for (let item of this.books) {
totalPrice += item.price * item.count
}
return totalPrice
}
},
methods: {
// getFinalPrice: (price) => {
// return '￥' + price.toFixed(2)
// }
add: function (index) {
this.books[index].count++
},
inc: function (index) {
this.books[index].count--
},
removeHandle: function (index) {
this.books.splice(index, 1)
}
},
filters: {
showPrice: function (price) {
return '￥' + price.toFixed(2)
}
}
})
注：文件文件位置
vue--购物车案例（小知识点总结）的更多相关文章
- vue 中的小知识点
1)使用is解决小bug <!DOCTYPE html><html lang="en"> <head> <meta charset=&qu ...
- vue经验 - 细节小知识点汇总（更新中...）
1. $refs 数据这么绑定的: 然后在created中抛出来,猜猜看看打印的是两个什么? 结果如下: 第一个跑出来了,第二个,却undefiend,没有东西?!... 后来去官网查看$refs的解 ...
- Vue(五) 购物车案例
这一篇把之前所学的内容做一个总结,实现一个购物车样例,可以增加或者减少购买数量,可移除商品,并且购物车总价随着你的操作实时变化. 实现效果如图: 代码: <!DOCTYPE html> & ...
- Vue实战-购物车案例
Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...
- vue面试题，知识点汇总(有答案)
一. Vue核心小知识点 1.vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态 ...
- Vue一个案例引发「内容分发slot」的最全总结
今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...
- Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...
- 深入了解webpack前，可以了解的小知识点。
阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...
- vue入门 0 小demo (挂载点、模板、实例)
vue入门 0 小demo (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...
- jQuery基础入门+购物车案例详解
jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...
随机推荐
- 有趣的bug——Java静态变量的循环依赖
背景 是的,标题没有错误,不是Spring Bean的循环依赖,而是静态变量之间的循环依赖. 近期的项目均是简单的Maven项目,通过K8S部署在阿里云上,其配置文件读取规则如下所示: (1) 优先读 ...
- 用linux编译并运行c文件
目录 创建一个.c文件 写完代码以后进行编译 @(用linux编译并运行c文件) 创建一个.c文件 vi 文件名.c 对于图形化的linux,需要右键桌面,在终端中打开,输入vi 文件名.c就创建了一 ...
- Linux（一）-- Linux环境搭建
Linux环境搭建 一.虚拟机安装 1.下载地址 https://my.vmware.com/web/vmware/info/slug/desktop_end_user_computing/vmwar ...
- cpu 乱序执行与问题【转】
转自:https://blog.csdn.net/lizhihaoweiwei/article/details/50562732 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议 ...
- 【洛谷P3329】 [ZJOI2011]最小割（最小割树）
洛谷 题意: 给出一个无向图,之后有\(q,q\leq 30\)组询问,每组询问有一个\(x\),回答有多少点对\((a,b)\)其\(a-b\)最小割不超过\(x\). 思路: 这个题做法要最小割树 ...
- 多线程(六)多线程同步_SemaPhore信号量
信号量依然是一种内核同步对象,它的作用在于控制共享资源的最大访问数量 例如:我们有一个服务器,为这服务器创建一个线程池,线程池有五个线程,每个线程处理1个请求.当五个线程都在处理请求时,这个线程池己到 ...
- day59_9_25中间键与登录认证
一.django中间件简介. 在django中,有这样的生命周期: 中间件就是处于wsgiref和urls模块中间,可以拦截所有的请求,其中有7个默认中间件: MIDDLEWARE = [ 'djan ...
- hdu6468 dfs剪枝 or char数组 or 构造
http://acm.hdu.edu.cn/showproblem.php?pid=6468 题意 有一个序列,是1到n的一种排列,排列的顺序是字典序小的在前,那么第k个数字是什么?(\(1 \leq ...
- Paper | Noise2Noise: Learning Image Restoration without Clean Data
目录 故事背景 算法原理 点估计 神经网络算法与点估计的关系 核心思想 回头品味 实验 高斯 其他生成噪声 发表在2018 ICML. 摘要 We apply basic statistical re ...
- 剑指offer：序列化二叉（前序遍历+层次）
1. 题目描述 /** 请实现两个函数,分别用来序列化和反序列化二叉树 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存. 序列 ...