利用Vue实现一个简单的购物车功能
开始学习Vue的小白，dalao多多指正
想要实现下面这个界面，包含总价计算、数量增加和移除功能
话不多说代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>小购物车</title>
</head>
<body>
<div id="app">
<table border="2">
<thead>
<td>书籍名称</td>
<td>书籍名称</td>
<td>出版日期</td>
<td>价格</td>
<td>购买数量</td>
<td>操作</td>
</thead>
<tbody>
<tr v-for="(item,index) in books" >
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td>
<button @click="removeBook(index)">移除</button>
</td>
</tr>
</tbody> </table>
<font>总价:{{toltalPrice | showPrice}}</font> </div>
<script src="./js/vue.js"></script>
<script>
const hello = new Vue({
el:'#app',
data:{
message:'Hello Vue !',
books :[
{
id:1,
name:'编程大法',
date:'2020-5',
price:999.00,
count:1
},
{
id:2,
name:'编程大法',
date:'2020-5',
price:999.00,
count:1
},
{
id:3,
name:'编程大法',
date:'2020-5',
price:999.00,
count:1
},
{
id:4,
name:'编程大法',
date:'2020-5',
price:999.00,
count:1
}
] },
filters: {
showPrice(price) {
return '￥'+price.toFixed(2);
}
},
methods:{
decrement(index){
this.books[index].count--;
},
increment(index){
this.books[index].count++;
},
removeBook(index){
this.books.splice(index,1);
} },
computed:{
toltalPrice(){
let toltalPrice=0;
for(let i=0;i<this.books.length;i++){
toltalPrice += this.books[i].price * this.books[i].count;
}
return toltalPrice;
}
} })
</script>
</body>
</html>
v-for:以前用原生javascript写界面的时候想要呈现出一个列表的效果需要在html中写多个<tr></tr>、<td></td>、<th></th>标签，使代码过于冗余，这就是框架好处之一啊哈哈。
<tr v-for="(item,index) in books" >
这个写法使item（books数组的项逐一遍历），index会记录数组下标
computed和methods
这也是比较巧妙的地方之一：虽然两者的内容都可以写函数，但是不同之处在于computed里的函数在页面加载时执行一次并且将内容保存在内存中，在下一次使用函数时不用重新调用，直接从内存中拿出来用就行会比methods里的函数节约内存，提高性能，对于频繁使用的函数可以写在computed里面，另外写在标签中时，computed里的函数只需要写函数名，methods里的需要写括号。但是computed会占用内存，所以不频繁调用的可以写在methods里面。computed类似于Vue中的属性，在计算结果发生改变时，结果会动态地发生改变
利用Vue实现一个简单的购物车功能的更多相关文章
- 利用JSP编程技术实现一个简单的购物车程序
实验二 JSP编程 一.实验目的1. 掌握JSP指令的使用方法:2. 掌握JSP动作的使用方法:3. 掌握JSP内置对象的使用方法:4. 掌握JavaBean的编程技术及使用方法:5. 掌握JSP ...
- 使用MongoDB和JSP实现一个简单的购物车系统
目录 1 问题描述 2 解决方案 2.1 实现功能 2.2 最终运行效果图 2.3 系统功能框架示意图 2.4 有关MongoDB简介及系统环境配置 2.5 核心功能代码讲解 ...
- 利用ANTLR4实现一个简单的四则运算计算器
利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...
- 利用jmeter做一个简单的性能测试并进行参数化设置
1.新增一个线程组,并在下面添加基本原件,包括:监听器.http请求默认值和一个事务控制器 在http请求默认值中填写 ip 地址和端口号,协议类型默认为http 2.添加代理服务器,以便之后进行录制 ...
- 利用 nodeJS 搭建一个简单的Web服务器（转）
下面的代码演示如何利用 nodeJS 搭建一个简单的Web服务器: 1. 文件 WebServer.js: //-------------------------------------------- ...
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
- Java中的策略模式，完成一个简单地购物车，两种付款策略实例教程
策略模式是一种行为模式.用于某一个具体的项目有多个可供选择的算法策略,客户端在其运行时根据不同需求决定使用某一具体算法策略. 策略模式也被称作政策模式.实现过程为,首先定义不同的算法策略,然后客户端把 ...
- 用 Vue 做一个简单的购物app
前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...
- 利用java实现一个简单的远程监控程序
一般的远程监控软件都是用c或者c++等语言开发的,而使用java如何来实现相同的功能呢. 首先我们先介绍一下一个简单的远程监控程序的实现原理. 功能一,远程屏幕监视 (1) 必须要有监控端与被监控端, ...
随机推荐
- React Native 真机调试(iOS / Android)
React Native 真机调试(iOS / Android) https://reactnative.dev/docs/running-on-device https://developer.ap ...
- js 大数计算
js 大数计算 原理 JavaScript 安全整数 是 -253-1 ~ 253-1 ,即: -9007199254740991 ~ 9007199254740991; 换句话说,整数超过这个范围就 ...
- APP 跳转到支付包小程序
APP 跳转到支付包小程序 APP选择支付宝支付,会跳转到支付宝小程序再支付 支付包 小程序 我司有自己的APP.生活号,小程序,这种情况下如何和小程序关联,跳转到小程序里去,做到无缝对接? 其实,小 ...
- Flutter: 监听App显示,隐藏
关键代码 class _MyAppState extends State<MyApp> with WidgetsBindingObserver { @override void initS ...
- NGK数字增益平台中如何分配代币产出
最近很多朋友听说NGK公链的主网和数字增益平台即将上线以后都纷纷表示非常感兴趣,已经基本了解了NGK代币的产出方式,但还是对代币产出分配的问题不是很明确.今天小编就给大家科普一下,NGK代币在NGK数 ...
- 使用 mask 实现视频弹幕人物遮罩过滤
经常看一些 LOL 比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili.虎牙)中,当人物与弹幕出现在一起的时候,弹幕会"巧妙"的躲到人物的下面,看着非常的智能. 简单的 ...
- 彻底解决Asp.netCore WebApi 3.1 跨域时的预检查204 options重复请求的问题
Asp.netCore WebApi 3.1 跨域的预检查options问题 1:我们直接使用core跨域的中间件 ,注入跨域服务, services.AddCors(options => { ...
- JVM 字节码之 int 入栈指令
本文转载自JVM 字节码之 int 入栈指令(iconst.bipush.sipush.ldc) 前言 本文介绍 int 入栈指令 iconst.bipush.sipubh.Idc. 当 int 取值 ...
- js实现复制粘贴
项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...
- Ping 的工作原理你懂了，那 ICMP 你懂不懂？
计算机网络我也连载了很多篇了,大家可以在我的公众号「程序员cxuan」 或者我的 github 系统学习. 计算机网络第一篇,聊一聊网络基础 :计算机网络基础知识总结 计算机网络第二篇,聊一聊 TCP ...