相思资源网 Design By www.200059.com
一、第一种比较简单
效果图
实现代码：
<!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>购物车案例</title> <script src="/UploadFiles/2021-04-02/vue.js">二、一个用vue实现的简单响应式购物车案例
实现结果
如上，所有书类数据存在数组里，遍历显示在表格中，点击+和-可以实现数量和总价格的响应式变化，其中，减号到1时便添加了disabled类型，无法点击。 价格显示时通过过滤器显示的，加上Z￥符号和两位小数。项目结构为三个文件。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css" rel="external nofollow" > </head> <body> <div id="app"> <div 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 v-for="value in item">{{value}}</td>--> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <!--<td>{{getFinalPrice(item.price)}}</td> 下面是过滤器语法--> <td>{{item.price | showPrice}}</td> <td> <button @click="increment(index)" v-bind:disabled="item.count<=1">-</button> {{item.count}} <button @click="decrement(index)">+</button> </td> <td> <button @click="removeHandler(index)">移除</button> </td> </tr> </tbody> </table> <h2>总价格: {{totalprice | showPrice}}</h2> </div> <h2 v-else> 购物车为空</h2> </div> <script src="/UploadFiles/2021-04-02/vue.js">main.js
const app = new Vue({ el:"#app", data: { books: [ { id: 1, name: '算法导论', date: '2019-01-10', price: 85.00, count: 1 }, { id: 2, name: '计算机导论', date: '2019-02-14', price: 90.00, count: 2 }, { id: 3, name: '科学导论', date: '2019-09-10', price: 85.21, count: 1 }, { id: 4, name: '网络导论', date: '2019-08-21', price: 19.02, count: 1 }, ] }, methods:{ getFinalPrice(price) { return '$' + price.toFixed(2) }, increment(index){ /*if(this.books[index].count <= 1) return*/ this.books[index].count-- }, decrement(index){ this.books[index].count++ }, removeHandler(index){ this.books.splice(index,1) } }, filters:{ showPrice(price){ return '$' + price.toFixed(2) } }, computed:{ totalprice(){ let tprice = 0 for(let i = 0; i< this.books.length; i++) { tprice += this.books[i].price * this.books[i].count } return tprice } } })style.css
table{ border: 1px solid #e9e9e9; border-collapse: collapse; bordre-spacing: 0; } th, td { padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th{ backgroud-color: #f7f7f7; color: #5c6b77; font-weight: 600; }
标签：
Vue,购物车
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无Vue实现购物车实例代码两则的评论...