过滤器

...
过滤器分为全局过滤器和局部过滤器
全局过滤器的格式：
html：
{{数据，全局过滤器的名字}}//解析数据
js：
Vue.filter("全局过滤器的名字",函数)
new Vue（{
el：“” //获取选择器
data：{} //数据
methods：{} //方法
}）

<div class="box">
    <p>{{msg|fun}}</p>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.filter("fun",function(data){
        if(data<10){
            return "0"+data
        }else{
            return data
        }
    })
    new Vue({
        el:".box",
        data:{
           msg:Math.floor(Math.random()*(20-0+1)+0)
        }
    })
</script>

局部过滤器的格式：
html：
{{数据，全局过滤器的名字}}//解析数据
js：
new Vue（{
el：“” //获取选择器
data：{} //数据
methods：{} //方法
filters：{}
}）-->

<div class="box">
    <p>{{msg|fun}}</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:".box",
        data:{
           msg:Math.floor(Math.random()*(20-0+1)+0)
        },
        filters:{
                fun:function(data){
                if(data<10){
                    return "0"+data
                }else{
                    return data
                }
            }
        } 
    })
</script>

过滤器的俩个例子：
1，保留俩位小数

    <div class='box'>
        <p>{{msg|fun}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box",
            data:{
                msg:Math.random()*100
            },
            filters:{
                fun:function(data){
                    return data.toFixed(2)
                }
            }
        })
    </script>

2.日期

    <div class="box">
        <h1>{{new Date()|fun}}</h1>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box",
            filters:{
                fun:function(date){
                    return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+","+"星期"+date.getDay()+","+date.getHours()+"点"+date.getMinutes()+"分"+date.getSeconds()+"秒"
                }
            }
        })
    </script>