1. <body>
    2.     <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
    3.     <div id="app">
    4.         <ul>
    5.             <li v-for="user in userList">
    6.                 {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
    7.                 {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
    8.             </li>
    9.         </ul>
    10.     </div>
    11.     <script src="../node_modules/vue/dist/vue.js"></script>
    13.     <script>
    15.       //全局过滤器
    16.         Vue.filter("gFilter", function (val) {
    17.             if (val == 1) {
    18.                 return "男~~~";
    19.             } else {
    20.                 return "女~~~";
    21.             }
    22.         })
    24.         let vm = new Vue({
    25.             el: "#app",
    26.             data: {
    27.                 userList: [
    28.                     { id: 1, name: 'jacky', gender: 1 },
    29.                     { id: 2, name: 'peter', gender: 0 }
    30.                 ]
    31.             },
    32.             filters: {
    33.                  //filters 定义局部过滤器，只可以在当前vue实例中使用
    34.                 genderFilter(val) {
    35.                     if (val == 1) {
    36.                         return "男";
    37.                     } else {
    38.                         return "女";
    39.                     }
    40.                 }
    41.             }
    42.         })
    43.     </script>
    44. </body>