Vue的filter过滤器

一和二，请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html

三、index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>index</title>
 8 
 9 </head>
10 <body>
11     <div id="app">
12         <div>
13             <input type="text" v-model="price">
14             {{price | currency("USD")}}
15         </div>
16 
17         <div>
18             <input type="text" v-model="length">mm
19             <br>
20             {{length | meter}}
21         </div>
22 
23     </div>
24    
25     <script src="../lib/vue.js"></script>
26     <script src="./js/main.js"></script>
27 </body>
28 </html>

四、main.js

 1 // 注意：过滤器是解决将界面展现在浏览器最后一公里的手段，所以适用于简单的处理，
 2 // 如果是复杂的处理，就尽量使用计算属性，因为其带有缓存，而且可重用性也很方便
 3 
 4 // 创建货币过滤器
 5 Vue.filter("currency",function(val,unit){
 6     val = val || 0;
 7     unit = unit || "元";
 8     return val + unit;
 9 });
10 
11 // 创建毫米转换米的长度过滤器
12 Vue.filter("meter",function(val,unit){
13     val = val || 0;
14     unit = unit || "m";
15     // toFixed(n) 此方法用于保留n位小数
16     return (val/1000).toFixed(2) + unit;
17 })
18 
19 new Vue({
20     el:"#app",
21     data:{
22         price:10,
23         length:20
24     }
25 })

五、效果

六、感谢观看，如有疑问，欢迎交流哦