<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <style type="text/css"> </style> </head> <body> <div id="app"> <table border="0" cellspacing="" cellpadding="20"> <tr> <th>序号</th> <th>电影名称</th> <th>发行时间</th> <th>电影票价</th> <th>购买数量</th> <th>操作</th> </tr> <tr v-for="(item,index) in movies"> <td>{{index}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.money | toFixedMoney}}</td> <td> <button type="button" @click="reduce(index)" :disabled="item.count<=1">-</button> {{item.count}} <button type="button" @click="plus(index)">+</button> </td> <td> <button type="button" @click="cut(index)">删除此行</button> </td> </tr> </table> <h2>共计:{{totaMoney | toFixedMoney}}</h2> </div> <script type="text/javascript"> const vm = new Vue({ el: '#app', data: { movies: [{ name: "蜘蛛侠", date: "2006-9", money: 45.00, count: 1 }, { name: "毒液", date: "2020-2", money: 32.00, count: 1 }, { name: "小猪佩奇", date: "2008-13", money: 20.00, count: 1 }, { name: "长津湖", date: "2021-10", money: 100.00, count: 1 } ], }, methods: { reduce(index) { this.movies[index].count--; }, plus(index) { this.movies[index].count++ }, cut(index) { this.movies.splice(index, 1) } }, computed: { totaMoney() { /* for循环 let total = 0; for (var i = 0; i < this.movies.length; i++) { total += this.movies[i].money * this.movies[i].count } return total; */ // forEach /* let total = 0; this.movies.forEach(item=>{ total += item.money * item.count }) return total */ // for in /* let total = 0; for(let i in this.movies){ total+= this.movies[i].money * this.movies[i].count } return total; */ // forof /* let total = 0; for (let item of this.movies) { total += item.money * item.count } return total; */ // filter /* let total = 0; this.movies.filter((v)=>{ total += v.count *v.money }) return total */ // map /* let total = 0; this.movies.map((v)=>{ total +=v.count * v.money }) return total */ // reduce return this.movies.reduce((currentTotal, item) => { return currentTotal + item.money * item.count }, 0) /* return this.movies.reduce((total, currentValue) => { return total += currentValue.money * currentValue.count }, 0) */ } }, filters: { toFixedMoney: function(money) { let fix = money.toFixed(2); return '￥' + fix } } }) </script> </body> </html>
效果如下：
Vue.filter( id, [definition] )注册或获取全局过滤器。
