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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue3 props用法(vue3组合API中setup、 ref、reactive的使用大全)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vue使用echarts教程(Vue使用echarts可视化组件的方法)
- vue可以使用模态框modal吗(vue基于Teleport实现Modal组件)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vue怎么注册公共组件(解读Vue组件注册方式)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vue动态列表布局(vue项目实现左滑删除功能完整代码)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue 网页打印(vue打印功能实现的两种方法总结)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 越难春卷(越难春卷皮怎么用)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)