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.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- springboot+vue项目演示(springboot+VUE实现登录注册)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- springboot vue 异地登录(vue+springboot实现登录验证码)
- vue统计代码行数(vue实现计数器简单制作)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- 艺人吴卓羲10年警察生涯,演足10年阿Sir,系咩玩法(艺人吴卓羲10年警察生涯)
- 菲律宾潜水(菲律宾潜水价格)
- 泰国人妖(变性手术生殖器要割掉吗)
- 泰国美女(泰国人妖和女性如何区分)
- 泰国旅游业怎么样(泰国的旅游产业)
- 越南新娘(越南新娘婚介网站)
热门推荐
- 异步调用中HttpContext.Current为null解决方法
- linux中基本操作系统有什么(Linux操作系统的概述与简介)
- ftp服务器包括哪些(FTP服务器和Web服务器知多少)
- react组件参数(浅析React中的受控组件和非受控组件)
- thinkphp5数据库配置(Thinkphp5框架实现获取数据库数据到视图的方法)
- mysql底层原理是什么(MySQL 页完全指南—浅入深出页的原理)
- docker pull 更新本地镜像(Docker 拉取镜像及标签操作 pull | tag)
- ps如何画一个哆啦a梦(CSS画出一个可爱神奇的多啦A梦)
- 云服务器50g月流量(云服务器怎么查看流量使用情况?)
- 怎么查看自己搭建的ftp服务器(你懂怎么建立 FTP 服务器么?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9