<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .show1 { color: blue; cursor: pointer; } </style> </head> <body> <div id="app"> <p>vue的过滤器</p> <div>价钱：{{getPrice(80)}}</div> <div>{{jishu()}}</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { books: [{ id: 1, name: '高级编程', price: 80, count: 1 }, { id: 1, name: '计算机基础', price: 50, count: 1 }, { id: 1, name: '红宝书', price: 30, count: 2 }, ], }, computed: { }, created: function () {}, methods: { // 过滤器， 保留后面2位小数, 可以用methods 写方法来代替过滤器 getPrice(price) { return '¥' + price.toFixed(2); }, pp() { // 1，for普通遍历 // let totalPre = 0; // for(let i = 0; i<this.books.length; i++){ // totalPre += this.books[i].price * this.books[i].count; // } // 2， for(let i of arr) for of来遍历 let totaPri = 0; for (let item of this.books) { totaPri += item.price * item.count } return totaPri; // 3，reduce遍历 // return this.books.reduce((pre, book) =>{ // return pre + book.price * book.count; // },0) }, jishu() { // 高阶函数： filter, map, reduce let nub = [10, 20, 50, 103, 120, 150]; // 1， 过滤小于100的数字 let nub2 = nub.filter((n) => { // 返回一个条件成立的数据 return n < 100; }) // 2，对数组的值进行改变，返回新的值 let newNub3 = nub2.map((item) => { return item * 2; }) // 3，reduce() // 对数组中的所有内容进行汇总, 要么相乘，相加 let total = newNub3.reduce((pre, cur) => { return pre + cur; }, 0) // 4，高阶写法 let total2 = nub.filter((n) => { return n < 100; }).map((n) => { return n * 2; }).reduce((pre, n) => { return pre + n; }, 0) // let tot3 = nub.filter(n => n<100).map(n => n*2).reduce((pre, n) => pre+n); } } }) </script> <script> </script> </html>