利用Vue实现一个简单的购物车功能
时间:2021-04-07
本文章向大家介绍利用Vue实现一个简单的购物车功能,主要包括利用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中的属性,在计算结果发生改变时,结果会动态地发生改变
原文地址:https://www.cnblogs.com/pyb-1205/p/14629214.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- java中设计模式之适配器模式
- java 中归并排序算法详解
- 详解java倒计时三种简单实现方式
- Java实现Dijkstra输出最短路径的实例
- Spring spel表达式使用方法示例
- 浅谈Spring学习之request,session与globalSession作用域
- Java中对象与C++中对象的放置安排的对比
- 详解nodejs通过代理(proxy)发送http请求(request)
- Spring AOP实现Redis缓存数据库查询源码
- react-native-fs实现文件下载、文本存储的示例代码
- Java实现CORS跨域请求的实现方法
- MongoDB 查询操作的实例详解
- 浅谈java实现mongoDB的多条件查询
- php mysql PDO 查询操作的实例详解
- Javascript刷新页面的实例