过滤器

2018-09-18  本文已影响0人  SuperHong521

...
过滤器分为全局过滤器和局部过滤器
全局过滤器的格式:
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>
上一篇 下一篇

猜你喜欢

热点阅读