Vue过滤器的使用

2022/5/17 vue

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法：

1.注册过滤器：

Vue.filter(name,callback)或new Vue(filter())

2.使用过滤器：

{{xxx|过滤器名}}或v-bind:属性="xxx|过滤器名"

备注：

1.过滤器也可以接受额外参数，多个过滤器也可以串联

2.过滤器并没有改变原本的数据，是产生新的对应的数据

   <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.4/dayjs.min.js"></script>
   
        <h2>计算属性当前时间为：{{filTime}}</h2>
        <h2>使用methods时间为：{{getformat()}}</h2>
        <!--过滤器：将time当作参数传给dateformat -->
        <h2>局部过滤器时间：{{time|dateformat}}</h2>
        <h2>传递两个参数{{time|dateformat2('YYYY-MM-DD')}}</h2>
        <h2>使用默认参数，不传参{{time|dateformat3}}</h2>
        <h2>使用默认参数，传参{{time|dateformat3('YYYY-MM-DD')}}</h2>
        <!-- 多个过滤器：将time当作参数传给format,然后将结果当作参数传给formatYear -->
        <h2>多个过滤器：{{time|dateformat|formatYear}}</h2>
        <div :x="time|dateformat">通过v-bind使用,标签会多一个属性x,x的值是当前时间</div>
        <!-- 全局过滤器 -->
        <h2>全局过滤器时间：{{time|fMTtime}}</h2>
           Vue.filter('fMTtime', function (val) {
            return dayjs(val).format('YYYY MM DD HH:mm:ss')
        })
        const vm = new Vue({
            el: '#root',
            filters: {
                //局部过滤器，会将time当作参数传给dateformat
                dateformat(val) {
                    return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
                },
                dateformat2(val, str) {
                    return dayjs(val).format(str)
                },
                dateformat3(val, str = 'YYYY-MM-DD HH:mm:ss') {
                    return dayjs(val).format(str)
                },
                formatYear(val) {
                    return val.slice(0, 4)
                }

            },
            data() {
                return {
                    time: 1652787801974
                }
            },
            computed: {
                filTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {
                getformat() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }

            },

        })

LOADING...

Vue过滤器的使用