过滤器和计算函数

让要显示在页面上的内容进行重新筛选，分为两种：

1.全局过滤器     2.局部过滤器

1.全局过滤器

例：

html部分

        <div id="itany">
            <p>{{new Date()|time}}</p>
        </div>

js部分

       <script>
            new Vue({
                el: "#itany",
                filters: {
                    time: function(data) {
                        return data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日,星期' + data.getDay() + ',' + data.getHours() + '点' + data.getMinutes() + '分' + data.getSeconds() + '秒';

                    }
                }

            })
        </script>

2.局部过滤器

例：

html部分

        <div id="itany">
            <p>{{12|zore}}</p>
        </div>

js部分

        <script>
            Vue.filter("zore",function(data){
                if(data<10){
                    return "0"+data;
                }else{
                    return data;
                }
            })
            new Vue({
                el:"#itany"
            })
        </script>

3.计算函数

例1：

html部分

        <div id="itany">
            <h1>{{count}}</h1>
        </div>

js部分

      <script>
            new Vue({
                el: "#itany",
                data: {
                    msg: "hello vue"
                },
                computed: {
                    count: function() {
                        return this.msg.split(" ").reverse().join("===")
                    }
                }
            })
        </script>

例2:

html部分

        <div id="itany">
            <h1>{{count}}</h1>
        </div>

js部分

       <script>
            new Vue({
                el: "#itany",
                data: {
                    msg: "hello vue"
                },
                computed: {
                    count: function() {
                        return this.msg.split(" ").reverse().join("===")
                    }
                }
            })
        </script>