作用：对数据进行简单的处理(过滤器语法完全可以被方法代替)

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>过滤器</title>
    9. </head>
    11. <body>
    12.     <div id="app">
    13.         <h3>{{price | myPrice('¥')}}</h3>
    14.         <h3>{{msg|myReverse}}</h3>
    15.     </div>
    16.     <script src="./vue.js"></script>
    17.     <script>
    18.         // 创建全局过滤器
    19.         Vue.filter('myReverse', (val) => {
    20.             return val.split('').reverse().join('');
    21.         })
    22.         // 为数据添油加醋
    23.         // ¥  $20
    24.         new Vue({
    25.             el: '#app',
    26.             data: {
    27.                 price: 10,
    28.                 msg:'hello 过滤器'
    29.             },
    30.             // 局部过滤器
    31.             filters: {
    32.                 myPrice: function (price, a) {
    33.                     return a + price;
    35.                 }
    36.             }
    38.         })
    39.     </script>
    40. </body>
    42. </html>