Vue 过滤器

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


注册过滤器：

  • 全局：Vue.filter(name,callback)
  • 局部：new Vue{filters:{}}
  • 注意全局是：filter，而局部的是 filters

使用过滤器：

  • 插值语法：{{xxx | 过滤器名}}
  • 单项数据绑定：v-bind:属性 = "xxx | 过滤器名"

备注：

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

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


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>

<div id="root">
    <h2>显示格式化后的事件</h2>
    <!--  计算属性  -->
    <h2>现在：{{fmtTime}}</h2>

    <!--  methods  -->
    <h2>现在：{{getFmtTime()}}</h2>

    <!--  过滤器  -->
    <h2>现在：{{time | timeFormater}}</h2>

    <!--  过滤器接受额外参数  -->
    <h2>现在：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss')}}</h2>
  
    <!--  过滤器串联  -->
    <h2>现在：{{time | timeFormater('YYYY年MM月DD日 HH:mm:ss') | mySlice}}</h2>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            time: 1621561377603  // 时间戳
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getFmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        filters: {
            timeFormater(value, str = 'YYYY-MM-DD HH:mm:ss') {
                return dayjs(value).format(str)
            },
            mySlice(value) {
                return value.slice(0, 4)
            }
        }
    })
</script>
</html>

posted @ 2022-04-15 11:58  春暖花开鸟  阅读(32)  评论(0)    收藏  举报