一、案例要求： 功能：点击购买数量的加号、减号进行数量的增减；移除数据；合计总价格等，具体功能界面如下： 二、案例结构： Index.html 界面 main.js 功能处理代码 style.css 样式 三、代码实现(功能比较简单，就直接上代码了) Index.html 界面： main.js 功能处理代码 style.css 样式 小技巧： 1、reduce函数，可以理解为“合计”的一个动作 2、filters，过滤器：进一步对数据进行处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </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>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price | showPrice}}</td> <td> <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button> {{item.count}} <button @click="increment(index)">+</button> </td> <td><button @click="removeClick(index)">移除</button></td> </tr> </tbody> </table> <h2>总价格：{{totalPrice | showPrice}}</h2> </div> <h2 v-else>购物车为空</h2> </div> <script src="../js/vue.js"></script> <script src="main.js"></script> </body> </html>
const app = new Vue({ el: '#app', data: { books: [ { id: 1, name: '《算法大师》', date: '2020-09', price: 89.9, count: 1 },{ id: 2, name: '《思维简史》', date: '2010-09', price: 100.00, count: 1 },{ id: 3, name: '《汇编语言》', date: '2030-10', price: 69.9, count: 1 },{ id: 4, name: '《计算机等级考试》', date: '2020-01', price: 56.88, count: 1 },{ id: 5, name: '《营养师》', date: '2015-08', price: 34, count: 1 }, ], btnEnable: true }, methods: { getFinalPrice(price) { return '￥' + price.toFixed(2) }, increment(index) { console.log('increment',index); this.books[index].count += 1 }, decrement(index) { console.log('decrement',index); this.books[index].count -= 1 }, removeClick(index) { this.books.splice(index,1) } }, computed: { totalPrice() { // 普通的函数 // let totalPrice = 0 // for (let i = 0; i < this.books.length; i++) { // totalPrice += this.books[i].price * this.books[i].count // } // return totalPrice // 高阶函数 reduce() return this.books.reduce((function (prevValue, book) { return prevValue + book.price * book.count } ),0) } }, filters: { showPrice(price) { return '￥' + price.toFixed(2) } }, })
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; } 
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
