Vue_过滤器

目录

• 前言
• ex.局部过滤器
• ex.全局过滤器

前言

明确一个概念————过滤器的本质是函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。Vue.js与AngularJS相似，使用管道符(|)进行连接

vue1.0有内置过滤器，2.0已经移除。

Vue中文文档关于过滤器的链接

ex.局部过滤器

<div id="app">
    <p>{{msg|dateText('yyyy-mm-dd hh:mm:ss')}}</p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        msg:new Date()
    },
    methods:{},
    filters:{
        dateText:function(dateStr,params1){
            var dt=new Date(dateStr);
            var y=dt.getFullYear();
            var m=(dt.getMonth()+1).toString().padStart(2,"0");
            var d=dt.getDate().toString().padStart(2,"0");
            if(params1&&params1=='yyyy-mm-dd'){
                return `${y}-${m}-${d}`;
            }else{
                var hh=dt.getHours().toString().padStart(2,"0");
                var mm=dt.getMinutes().toString().padStart(2,"0");
                var ss=dt.getSeconds().toString().padStart(2,"0");
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            }
        }
    }
})
</script>

ex.全局过滤器

<div id="app">
    <p>{{msg|uppercase}}</p>
</div>
<script>
    Vue.filter('uppercase',function(msg){
        return msg.toUpperCase();
    })
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'hello'
        },
        methods:{}
    })
</script>