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",即倡导写更少的代码,做更多 ...
随机推荐
- zabbix4.0搭建2
server端(ip 192.168.200.15) proxy端(ip 192.168.200.22) agent端(ip 192.168.200.12) server端: #安装数据库 [mari ...
- python生产者和消费者模式实现(一)普通方式
import timeimport randomfrom multiprocessing import Queue # 生产者def producer(q, num): for i in range( ...
- web网页利用JavaScript实现对摄像头的调用
实现效果: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...
- [Go] 利用channel形成管道沟通循环内外
这个要解决的问题是,比如如果有一个大循环,取自一个大的文件,要进行逻辑处理,那么这个逻辑的代码要放在循环每一行的循环体里面,这样有可能会出现一个for循环的逻辑嵌套,一层又一层,类似俄罗斯套娃.如果放 ...
- cobalt strike入门和防护
1.入门: https://blog.csdn.net/localhost01/article/details/86741124 2.cs的防护: 由于关乎渗透人员自身的安全,建议大家好好看看,这里贴 ...
- CodeForces - 1255C（构造+模拟）
题意 https://vjudge.net/problem/CodeForces-1255C 一个长度为n的序列,给你n-2个三元组,比如p=[1,4,2,3,5],那么三元组为[1,4,2],[4, ...
- C++：map用法及元素的默认值
C++:map用法 一.map基本用法 键值对 第一个参数为键的类型,第二个参数为值的类型. 源代码 #include <iostream> #include <string> ...
- jenkins添加TPS与服务器监控变化曲线图
第一步,首先在测试的脚本中添加你所需要查看的曲线图的监控路径 譬如我想查看TPS变化图 添加hps监控图 添加服务器监控图 把所有jtl文件保存到/opt/workspace/B_Stress_Tes ...
- jQ的select事件和trigger方法的小冲突
方法和事件都不难理解,分开用也都没问题,但是一起用就有些小问题出现. 直接上结论:使用trigger方法触发一个文本类型的 input 元素的select事件时,chrome浏览器会错误的触发三次,f ...
- 【洛谷4920】[WC2015] 未来程序（提答题）
点此看题面 大致题意: 把\(10\)个点的暴力代码和输入数据都给你,让你求出输出数据. 子任务\(1\) 第一个子任务自然是拿来送分用的... 容易发现就是一个快速乘的过程啊. 代码如下: #inc ...