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",即倡导写更少的代码,做更多 ...
随机推荐
- Vue实战狗尾草博客后台管理系统第七章
Vue实战狗尾草博客后台管理平台第七章 本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...
- ORACLE基础之oracle锁（oracle lock mode）详解
ORACLE里锁有以下几种模式: 0:none 1:null 空 2:Row-S 行共享(RS):共享表锁,sub share 3:Row-X 行独占(RX):用于行的修改,sub exclusiv ...
- Linux--NIS
一. 环境准备 操作系统:CentOS7.6 服务端安装如下软件: 软件名称 功能 ypserv NIS Server端的服务进程 rpcbind 提供RPC服务 客户端安装如下软件: 软件名称 功能 ...
- [PHP] time_wait与长连接短连接
服务端上查看tcp连接的建立情况,直接使用netstat命令来统计,看到了很多的time_wait状态的连接.这些状态是tcp连接中主动关闭的一方会出现的状态.该服务器是nginx的webserver ...
- CodeForces - 1253D（并查集）
题意 https://vjudge.net/problem/CodeForces-1253D 一个无向图,对于任意l,r,如果l到r有路径,那么l到m也有路径(l<m<r),问最少加多少条 ...
- vue 组件之纯表格渲染--没有事件交互
组件 名称小写==> 用-链接 02===> 属性==> empty-text="暂无数据" 当表格中没有数据 就会显示 暂无数据 <el-table-co ...
- requests的请求机制
库结构: 工作机制: api.py get.post.put.delete等请求方式都在api文件中,另外,api文件中还有个request方法,使用任何一种请求方式都是调用request方法,只是传 ...
- 三台三层交换机OSPF多区域划分动态路由实验
一.实验拓扑 二.实验步骤 1.给主机设置IP,网关:给交换机划分VLAN,给VLAN划分端口,给VLAN设置IP 2.启用OSPF.宣告网段(network 网络地址 反掩码 区域名 其中0 ...
- B1013
python语言运行这道题有一个点运行超时,需要对求素数的算法进一步的优化 def isPrime(n): if n <= 1: return False i = 2 while i * i & ...
- VS2017 无法解析的外部符号 __vscwprintf
我是将VS2012 升级到VS2017,然后对以前的项目重新编译, 就出现了下面错误 错误 LNK2019 无法解析的外部符号 __imp__vsnprintf,该符号在函数 *******中被引用 ...