Vue实现购物车实例代码两则
(编辑：jimmy 日期: 2024/12/28 浏览：3 次 )
一、第一种比较简单
效果图
实现代码：
<!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实现购物车案例
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。