vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)
类别:编程学习 浏览量:1105
时间:2021-10-02 01:03:09 vue开发的购物车0.1加0.2
vue实现可改变购物数量的购物车本文实例为大家分享了vue实现改变购物数量的购物车,供大家参考,具体内容如下
效果图:
知识点:
1.computed 计算属性
2.filters 过滤器
实现代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> table { border-collapse: collapse; border-spacing: 0; border: 1px solid #ccc; } td, th { padding: 8px 16px; border: 1px solid #ccc; text-align: left; } th { background-color: #f7f7f7; color: #5c6b77; } </style> <body> <li id="box"> <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"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price | toprice}}</td> <td> <button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}} <button @click='add(index)'>+</button> </td> <td> <button @click="remove(index)">移除</button> </td> </tr> </tbody> </table> <h2>总价:{{getallprice | toprice}}</h2> </li> <h2 v-else>您没有购物信息</h2> </li> <script> const vm = new Vue({ el: "#box", data: { books: [{ id: 1, name: "《vue.js实战》", date: "2010.2.4", price: 82.00, aunt: 1 }, { id: 2, name: "《javascript实战》", date: "2010.2.4", price: 108.00, aunt: 1 }, { id: 3, name: "《html+css实战》", date: "2010.2.4", price: 42.50, aunt: 1 }, { id: 4, name: "《axios实战》", date: "2010.2.4", price: 82.00, aunt: 1 }, { id: 5, name: "《jquery实战》", date: "2010.2.4", price: 65.20, aunt: 1 }, ] }, methods: { add(index) { this.books[index].aunt++; }, down(index) { this.books[index].aunt--; }, remove(index) { this.books.splice(index, 1) }, }, computed: { getallprice() { let all = 0; for (let i = 0; i < this.books.length; i++) { all += this.books[i].price * this.books[i].aunt } return all } }, filters: { toprice(price) { return '¥' + price.toFixed(2) }, } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue 排班安排(vue实现钉钉的考勤日历)
- 详解从vue的组件传值着手观察者模式(详解从vue的组件传值着手观察者模式)
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- vue各组件如何引用(Vue局部组件数据共享Vue.observable的使用)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue在html里面怎么展示图片(v-html渲染组件问题)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue身份验证(详解vue身份认证管理和租户管理)
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue组件详解(Vue的方法和属性案例详解)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
热门推荐
- mysql常用优化方法(理解MySQL查询优化处理过程)
- laravel自定义命令(laravel中数据显示方法默认值和下拉option默认选中)
- 云服务器和物理服务器哪个可靠(云服务器与香港服务器有什么区别?)
- mysqlint后面的4是什么意思(MySQL中intn后面的n到底代表的是什么意思)
- css3特性动画图(CSS3轻松实现清新 Loading 效果的简单实例)
- 怎么对python中列表进行排序(Python列表常见操作详解获取,增加,删除,修改,排序等)
- tortoisesvn 合并分支
- nginx动静分离的原理(Nginx动静分离实现案例代码解析)
- thinkphp5数据库配置(Thinkphp5框架实现获取数据库数据到视图的方法)
- 数据库设计的几个建议
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9