vue实现添加购物车小球(Vue实现简易购物车案例)
类别:编程学习 浏览量:888
时间:2022-01-20 00:04:44 vue实现添加购物车小球
Vue实现简易购物车案例本文实例为大家分享了Vue实现简易购物车的具体代码,供大家参考,具体内容如下
先来看一下完成后的效果吧。
CSS 部分
这里没什么好说的,就是v-cloak 这一个知识点
table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: center; } th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; } [v-cloak]{ display: none; }
HTML部分
这里说明一些用到的一些Vue的知识点:
- v-if
- v-for
- v-cloak
- v-on > @
- v-bind > :
- 方法 methods
- 计算属性 computed
- 过滤器 filters
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购物车</title> <link rel="stylesheet" href="style.css" > </head> <body> <li id="app" v-cloak> <li 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"> <th>{{item.id}}</th> <th>{{item.name}}</th> <th>{{item.date}}</th> <!--方案一 保留小数点和货币符号--> <!-- <th>{{"¥"+item.price.toFixed(2)}}</th> --> <!--方案二--> <!-- <th>{{getFinalPrice(item.price)}}</th> --> <!--方案三--> <th>{{item.price | showPrice}}</th> <th> <button @click="decrement(index)" :disabled="item.count<=0">-</button> {{item.count}} <button @click="increment(index)">+</button> </th> <th><button @click="removeHandle(index)">移除</button></th> </tr> </tbody> </table> <h2>总价格:{{totalPrice | showPrice}}</h2> </li> <h2 v-else> 购物车为空 </h2> </li> </body> <script src="../js/vue.js"></script> <script src="main.js"></script> </html>
JS部分
const app = new Vue({ el:"#app", data:{ books:[ { id:1, name:"《算法导论》", date:'2006-9', price:85.00, count:1 }, { id:2, name:"《UNIX编程艺术》", date:'2006-2', price:50.00, count:1 }, { id:3, name:"《编程艺术》", date:'2008-10', price:39.00, count:1 }, { id:4, name:"《代码大全》", date:'2006-3', price:128.00, count:1 }, ] }, methods: { //这里我们放弃使用方法的形式来求总价格,转而使用计算属性,因为它的效率更高。 // getFinalPrice(price){ // return "¥"+price.toFixed(2) // }, increment(index){ this.books[index].count++ }, decrement(index){ this.books[index].count-- }, removeHandle(index){ this.books.splice(index,1); } }, computed: { totalPrice(){ // 方案一:普通的for循环 // let totalPrice = 0; // for(let i=0;i<this.books.length;i++){ // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice // 方案二:for in // let totalPrice = 0; // for(let i in this.books){ // // console.log(i);//1 2 3 4 // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice // 方案三:for of // let totalPrice = 0; // for(let item of this.books){ // // console.log(item);//这里拿到的就是数组里的每个对象 // totalPrice += item.price * item.count // } // return totalPrice // 方案四:reduce return this.books.reduce(function (preValue, book) { // console.log(book);//分别输出四个对象 return preValue + book.price * book.count }, 0) } }, // 过滤器 filters:{ showPrice(price){ return "¥"+price.toFixed(2) } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue走马灯特效(Javascript结合Vue实现对任意迷宫图片的自动寻路)
- vue手动清除keepalive缓存(vue中keep-alive组件的用法示例)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- vue设置属性没响应(Vue.$set 失效的坑 问题发现及解决方案)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- vue身份验证(详解vue身份认证管理和租户管理)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- 使用vue组件开发项目(Vue记事本实例详解)
- vue源码系列教程(vue使用引用库中的方法附源码)
- vue集成文件上传插件(vue 实现上传组件)
- vue验证码(vue_drf实现短信验证码)
- 使用vue独立开发组件(vue单文件组件的实现)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
- 今天要吃什么(今天要吃什么菜)
- 营养餐是什么(学校营养餐是什么)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
- 杯酒人生---瓦伦丁酒杯和奥丁格啤酒(杯酒人生---瓦伦丁酒杯和奥丁格啤酒)
热门推荐
- dede菜单激活状态(DEDE采集大师官方留后门的删除办法)
- css3控制效果过渡的属性(css3之UI元素状态伪类选择器实例演示)
- reactmap给了key仍然提示错误(react为什么不推荐使用index作为key)
- 如何用python爬取最新电影(使用python实现抓取腾讯视频所有电影的爬虫)
- vue代码和element用法(Vue Element前端应用开发之整合ABP框架的前端登录)
- xm文档使用教程(xmapp环境搭建注意事项说明)
- thinkphp中view视图的作用(Thinkphp5.0框架视图view的模板布局用法分析)
- mysql建表时指定聚簇索引(一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的)
- python对列表排序(Python实现对特定列表进行从小到大排序操作示例)
- python的基础数据结构有哪些(详解python的四种内置数据结构)