Vue 局部过滤器和全局过滤器

Vue 过滤器总结：

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

语法：

1、注册过滤器： Vue.filter(name,callback) 或 new Vue{filters:{}}

2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

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

2、并没有改变原本的数据，是产生新的对应的数据

其他：Boot CDN 极兔云 是一个第三方库的网站

下载：Day.js库（Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js)

 案例：

1、效果图：

 2、引用的javeScript库：

<script type="text/javascript" src="../js/dayjs.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>

3、HTML

<body>
        <!--准备一个容器-->
        <div id="root" style="background-color: rgb(176, 218, 238); padding: 8px;">
            <h2>显示格式化后的时间:</h2>
            <!-- 计算属性实现 -->
            <h3>计算属性实现 : {{fmfTime}}</h3>
            <!-- methods实现 -->
            <h3>methods实现 : {{getFmfTime()}}</h3>
            <!-- 过滤器实现 -->
            <h3>1、局部过滤器实现不带参 ：{{time | timeFormater}}</h3>
            <h3>2、局部过滤器实现带参 : {{time | timeFormater("YYYY年MM月DD日")}}</h3>
            <h3>3、局部过滤器实现串联 : {{time | timeFormater | mySlice}}</h3>
            <h3>4、全局过滤器实现串联 : {{time | timeFormater | mySlice2}}</h3>
        </div>
    </body>

4、javaScript

<script type="text/javascript">
    Vue.config.productionTip = false

    Vue.filter("mySlice2",function(value){
        return value.slice(0,5)
    })//全局过滤器

    new Vue({
        el:"#root",
        data:{
            time:1621561377603//时间戳
        },
        methods:{
            getFmfTime(){
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            }
        },
        computed:{
            fmfTime(){
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            }
        },
        filters:{//局部过滤器
            timeFormater(value,formatStr="YYYY年MM月DD日 HH:mm:ss"){
                return dayjs(value).format(formatStr)
            },
            mySlice(value){
                return value.slice(0,4)
            }
        }
    })
</script>

视频学习：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=39&spm_id_from=pageDriver&vd_source=60a28e8364654bee938864b1d19905ec

第39集

posted @ 2023-02-13 22:09  codeing123  阅读(89)  评论(0)  编辑  收藏  举报