目录
- 1.购物车案例
- 2.代码实现
- 3.总结
1.购物车案例
经过一系列的学习,我们这里来练习一个购物车的案例
需求:使用
vue
写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮,会移除该商品,当把所有的商品移除后,页面上的表单消失,然后出现文字:购物车为空,表单下方是商品的总价格,随着商品的数量增加而增加,默认是0元,
总体效果如下:
2.代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> <style> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; } </style> </head> <body> <div id="app"> <div v-if="books.length"> <table> <thread> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thread> <tbody> <tr v-for="(book, index) in books" :key="book"> <td>{{index+1}}</td> <td>{{book.name}}</td> <td>{{book.publish_date}}</td> <td>{{book.price | showPrice}}</td> <td> <button @click="decrease(index)" :disabled="book.count <= 0">-</button> {{book.count}} <button @click="increase(index)">+</button> </td> <td> <button @click="removeClick(index)">移除</button> </td> </tr> </tbody> </table> <p>总价:{{totalPrice | showPrice}}</p> </div> <h2 v-else>购物车为空</h2> </div> <script> const app = new Vue({ el: "#app", data: { books: [ {"name":"算法导论", "publish_date":"2006-9", "price":20.00, "count": 0}, {"name":"UNIX编程艺术", "publish_date":"2006-2", "price":30.00, "count": 0}, {"name":"编程技术", "publish_date":"2008-10", "price":40.00, "count": 0}, {"name":"代码大全", "publish_date":"2006-3", "price":50.00, "count": 0}, ], }, methods: { // 增加+ decrease(index){ this.books[index].count-=1 }, // 减少- increase(index){ this.books[index].count+=1 }, // 移除按钮 removeClick(index){ this.books.splice(index, 1) } }, computed: { // 计算总价格 totalPrice(){ let totalPrice = 0 for (let item of this.books){ totalPrice += item.price * item.count } return totalPrice } }, // 过滤器,将价格过滤成有2位小数的 filters: { showPrice(price){ return '¥' + price.toFixed(2) } } }) </script> </body> </html>
3.总结
v-for:循环,循环books
列表
v-on:事件监听,监听点击事件
disabled:按钮是否可以点击的属性,为True
可点击,为False
不可点击,增加判断条件:disabled="book.count <= 0"
当购物车数量≤0
,则无法点击
v-if和v-else:条件判断,判断books
的列表长度,如果有长度展示列表,如果长度为0则展示文字购物车为空
filters:自定义过滤器,过滤价格,使本身的价格过滤后带有2位小数
computed:计算属性,计算购物的总价格
到此这篇关于Vue 购物车案例练习的文章就介绍到这了,更多相关Vue 购物车练习内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!