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) } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue怎么实现预览与放大(Vue实现牌面翻转效果)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue加载html5动画(vue实现旋转木马动画)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue图片切换软件(Vue实现简单图片切换效果)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- 英语难学吗(法语比英语难学吗)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
热门推荐
- css的border怎么设置三角形(CSS border虚线边框属性教程)
- sql语句按字段排序(SQL语句实现表中字段的组合累加排序)
- docker容器与宿主机通信(docker容器与宿主机的数据交互方式总结)
- laravel操作技巧(Laravel+Intervention实现上传图片功能示例)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- Oracle TO_CHAR的使用
- vue elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- php开发模式有哪些(PHP设计模式之简单工厂和工厂模式实例分析)
- ASP.NET中使用CodeDomProvider调用js文件中的js方法
- 网页http400错误请求怎么解决(HTTP 错误 403.1禁止访问:禁止执行访问的完美解决方法)