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",即倡导写更少的代码,做更多 ...
随机推荐
- 【CobaltStrike】对CobaltStrike内置功能模块的了解
对CobaltStrike内置功能模块的了解 0x00 右键功能列表 Interact 打开beacon Access dump hashes 获取hash Elevate 提权 Golden Tic ...
- SSDB数据库笔记
目录 环境 配置文件 启动服务器 客户端 SSDB:一个高性能的支持丰富数据结构的 NoSQL 数据库, 用于替代 Redis. 参考文献: SSDB官网 环境 win10 下 wsl 环境 ubun ...
- kafka相关操作
kafka安装 下载 wget http://apache.gree.com/apache/kafka/1.0.2/kafka_2.11-1.0.2.tgz tar -zxvf kafka_2.11- ...
- 5. Vue - 小清单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python3.5.3rc1学习二
#if else示例x = 5y = 8 if x > y: print("x is greater than y")else: print("x is not g ...
- arXiv网站
arXiv 原先是由物理学家保罗·金斯巴格在1991年建立的网站, 我们会将预稿上传到arvix作为预收录,因此这就是个可以证明论文原创性(上传时间戳)的文档收录网站.
- oracle 数据库下所有表结构、数据量及缺失值统计
表结构 SELECT t1.TABLE_NAME, t1.COLUMN_NAME, t1.DATA_TYPE || '(' || t1.DATA_LENGTH || ')', t2.COMMENTS ...
- Git仓库占用空间太大的解决方法
git gc --aggressive对本地git库进行更彻底清理和优化,这个指令花费的时间也会更长. 胡云飞系统部署搭建整体把控:git gc --auto这是一个设置的指令,并不会进行gc操作.如 ...
- Spring Boot 2.2.1 正式发布，需特别注意这个注解的使用！
Spring Boot 2.2.1 已于2019年11月7日正式发布. 该版本内容包含110项修复.改进和依赖升级. 如果开发者要从Spring Boot 2.2.0升级到2.2.1的话,这里要特别注 ...
- Ubuntu命令行打开新终端并执行脚本
gnome-terminal -x bash -c "bash test.sh;exec bash;"