vue购物车简单项目(vue实现简单购物车案例)
类别:编程学习 浏览量:1695
时间:2022-01-21 00:49:36 vue购物车简单项目
vue实现简单购物车案例本文实例为大家分享了vue实现简单购物车的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <li id="app"> <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' ::key="item"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price*item.count | getFinalPrice}}</td> <td> <button @click='reduce(index)' :disabled='item.count <= 1'>-</button> {{item.count}} <button @click='add(index)'>+</button> </td> <td> <button @click='removeBtn(index)'>移除</button> </td> </tr> </tbody> </table> <h2 v-if='books!=""'>总价格:{{theSumOf | getFinalPrice}}</h2> <h2 v-else>购物车为空</h2> </li> </body> <script src="../js/vue.min.js"></script> <script> var app = new Vue({ el: '#app', data: { books: [ { id: 1, name: '计算机应用', date: '2006-9', price: 85.00, count: 1 }, { id: 2, name: 'java应用', date: '2006-9', price: 10.00, count: 1 }, { id: 3, name: '大数据', date: '2006-9', price: 85.00, count: 1 }, { id: 4, name: 'ui设计师', date: '2006-9', price: 85.00, count: 1 }, ], addAnd:0 }, methods: { add(index) { this.books[index].count++ }, reduce(index) { this.books[index].count-- }, removeBtn(index) { this.books.splice(index, 1) } }, components: { }, computed: { theSumOf: function () { //累加计算的第一种方法 //let sum = 0 //this.books.forEach(item => { // sum += parseInt(item.price)*parseInt(item.count) }); //return sum //累加计算的第二种方式 //let sum = 0 //for(let i in this.books){ //sum += this.books[i].price*this.books[i]*count } //return sum //累加计算的第三种方式 //let sum = 0 //for(let item of this.books){ //sum += item.price*item.count //} //return sum //累加计算的第四种方法 return this.books.reduce(function(preValue,book){ return preValue + book.price*book.count },0) } }, filters: { getFinalPrice(price) { return '¥' + price.toFixed(2) }, } }); </script> <html>
关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 小白vue教学(尤大大新活petite-vue的实现)
- vue引入axios(vue封装axios的几种方法)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue 设置头部可以左右滑动(vue实现左右滑动效果实例代码)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue组件轮播(vue+rem自定义轮播图效果)
- vue用手动上传图片(vue上传图片文件的多种实现方法)
- 智能手表兼容Windows和Android 无需充电挑战苹果(智能手表兼容Windows和Android)
- 一天一冲也算表 麦步,一款待机 21 天的智能手表体验评测(一天一冲也算表)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
- 华为 Watch GT2 Pro 智能手表曝光,新增支持无线充电(华为WatchGT2)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
- 你知道 七夕 的真正含义吗(你知道七夕的真正含义吗)
热门推荐
- docker镜像无法删除 Error:No such image:xxxxxx解决(docker镜像无法删除 Error:No such image:xxxxxx解决)
- vue页面关闭前的执行(Vue 页面监听用户预览时间功能的实现代码)
- mysql数据库基础练习(最全50个Mysql数据库查询练习题)
- idea项目中tomcat的配置(tomcat部署项目以及与IDEA集成的实现)
- html+css网页布局实例(网页布局入门教程 如何用CSS进行网页布局)
- css3弹出动画效果(CSS3实现跳动的动画效果)
- 使用TLS加密通讯远程连接Docker的示例详解(使用TLS加密通讯远程连接Docker的示例详解)
- python的条件判断和循环(对Python中的条件判断、循环以及循环的终止方法详解)
- nginxdocker界面(Docker部署nginx实现过程图文详解)
- sql server没有服务器怎么办(SQL Server 2012安装后服务器名称找不到的解决办法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9