vue属性 filter过滤器

最新推荐文章于 2025-03-09 20:24:50 发布

npc_energy

最新推荐文章于 2025-03-09 20:24:50 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.youkuaiyun.com/npc_energy/article/details/93773460

版权

vue属性 filter过滤器

vue 1.x 版本借鉴了 angular , 提供 10 个过滤器，包括有：日期小数点位数保留货币大小写等

Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式

自定义过滤器
定义过滤器有两种方式，第一种是全局过滤器，我们可以直接在vue对象上使用filter方法注册过滤器，这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使用，接下来我们使用这两种方式注册过滤器函数。
过滤器要想获得我们的数据，要通过一个叫做 ‘管道符 | ’ 来获取数据
过滤器是对已经有的数据进行格式化，也就是必须先有数据，再去格式化

全局过滤器

<body>
    <div id="app">
         {{ msg | msgfilter('-') }}
    </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
    Vue.filter('msgfilter',function(val,type){
        let year = val.getFullYear()
        let month = (val.getMonth()+1)
        let day = val.getDate()
        return year + type + month + type + day;
    })
    let time = Date.now();
    time = new Date (time);
    new Vue({
        el: "#app",
            data: {
                msg: time
            }
    })
</script>

局部过滤器


<body>
    <div id="app">
          {{ msg | msgfilter('-') }}
    </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
let time = Date.now();
time = new Date (Date.now());
    new Vue({
        el: "#app",
        data: {
             msg: time
        },
        filters:{
            'msgfilter': function(val,type){
                    let year = val.getFullYear()
                    let month = (val.getMonth()+1)
                    let day = val.getDate()
                    return year + type + month + type + day;
              }
        }
    })

</script>