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",即倡导写更少的代码,做更多 ...
随机推荐
- Saltstack_使用指南10_配置管理-状态模块
1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...
- PHP将数组转字符串
implode(',',$arr) //将数组转字符串 $arr = [ 'a'=>1, 'b'=>2, 'c'=>3, ]; $arr_string = implode(',',$ ...
- 6.Java基础_Java自增自减/关系/逻辑/三元运算符
/* 自增自减运算符 关系运算符 逻辑运算符 三元运算符 (同C++) */ public class OperatorDemo01 { public static void main(String[ ...
- Jmeter Question 之 ‘批量执行SQL语句’
第一步: MySql数据库:jdbc:mysql://ip:3306/数据库名?useUnicode=true&characterEncoding=utf8&allowMultiQue ...
- golang 服务端和客户端（二）
1.golang服务端 package main import( "net/http" ) func main(){ //注册处理函数,用户连接,自动调用指定的处理函数 http. ...
- python工具-将视频按帧截取图片（附代码）
描述:将一个视频流按帧数截取大量的图片 用途:AI的数据集制作,得到大量的图片,之后将其打标签 更改的地方 1.default--间隔的帧数 2.input/output--输入视频的路径.存放截 ...
- ionic4之ion-sliders
<ion-content class="details_"> <img class="courimg_" src="assets/i ...
- js支持装饰器
vscode中使用装饰器不报错 { "compilerOptions": { "experimentalDecorators": true } } yarn a ...
- Linux学习笔记-第13天 最近有点跟不上节奏阿
难度上来了.最近工作也忙起来了..有点跟不上节奏.加油吧
- matlab练习程序（DBSCAN）
DBSCAN全称Density-Based Spatial Clustering of Applications with Noise,是一种密度聚类算法. 和Kmeans相比,不需要事先知道数据的类 ...