过滤器

局部过滤器

概念

在开发过程中，有一些数据在数据库中存储的值并不是我们想渲染到页面上的值，需要进行加工才能使用。
例如：某个表中对于时间的存储存的是时间戳，写接口时也没有做处理，这时前端拿到数据后不能直接渲染到页面，而是需要加工一下，经过加工后在渲染到页面中。
过滤器和计算属性差不多，也需要在 Vue 实例中进行配置。

代码实现

代码

html

<body>
    <div id="root">
        <h2>当前时间：{{time | fmtTime}}</h2>
    </div>
    <script>
        new Vue({
            el: '#root',
            computed: {
                time(){
                    return Date.now();
                }
            },
            filters: {
                fmtTime(time){
                    let date = new Date(time);
                    let y = date.getFullYear();
                    let m = date.getMonth() + 1;
                    let d = date.getDate();

                    m = m < 10 ? ('0' + m) : m;
                    d = d < 10 ? ('0' + d) : d;
                    
                    return y + '-' + m + '-' + d;
                }
            }
        })
    </script>
</body>

运行结果

局部过滤器 ​

概念 ​

代码实现 ​

局部过滤器

概念

代码实现