vue 过滤器的使用html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul v-for="item in items"> <li> <!-- 第一种 --> {{item.price | priceStyle}} <!-- 第二种 --> {{priceFilter(item.price )}} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { items: [{ id: 1, name: "js", price: 2000, number: 1 }, { id: 2, name: "node.js", price: 4000, number: 5 }, { id: 3, name: "py", price: 2000, number: 1 }, { id: 4, name: "java", price: 500, number: 2 }] }, methods: { priceFilter(price) { return price.toFixed(2); } }, filters: { priceStyle(price) { return price.toFixed(2); } } }) </script> </body> </html>