Vue 过滤器

过滤器就是数据在页面上输出之前对其进一步进行格式化.

语法

1. 语法:
    1.1 在视图页面中使用过滤
       a. {{表达式|过滤器1|过滤器2}}
       b. <标签 v-bind:属性名字="表达式|过滤器1|过滤器2"></标签>
           简写形式:
         <标签 :属性名字="表达式|过滤器1|过滤器2"></标签>
    1.2 在Vue实例中定义过滤器
     var app = new Vue({
            el: "#app",
            data: {
                message : "hello it",
            },
            filters:{
                过滤器1: function (value) {
                     return "处理结果";
                },
                过滤器1: function (value) {
                    return  "处理结果"
                }
            }
        });

 4. 注意事项:
     4.1 过滤器中的value是视图中待处理的值
     4.2 过滤器必须有返回值,该返回值是处理结果. 该结果最终在页面上输出

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
       data: {
            message : "hello it",
        },
        filters:{
            toUpperCase: function (value) {
                return value.toUpperCase();
            },
            firstUpperCase: function (value) {
                return value.charAt(0).toUpperCase() + value.slice(1);
            },
           wordFirstUpperCase: function (value) {
                 var words = value.split(" ");
                 var newWords = words.map(function (t) {
                        return t.charAt(0).toUpperCase() + t.slice(1)
                  });
                return newWords.join(" ");
           }
        }
    });
</script>