Vue 过滤器

作用：实现一些简单的逻辑，前面的结果作为输入值给后面(与管道符类似)

语法

1、定义，默认带value

//局部，vue中, 有返回值
filters:{
   过滤器名(value){
   return 值 
  }       
}
//全局，全局过滤器定义在vm前面
Vue.filter(过滤器名称, function(value){})

2、使用

// 可以传递参数
{{xxx | 过滤器名称(参数)}}

注意：过滤器可以单个使用，也可以串联使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="container">
        <h2>时间格式1：{{showTime | fmtTime}}</h2>
        <h2>时间格式2：{{showTime | fmtTime('YYYY-MM-DD')}}</h2>
        <h2>时间格式3：{{showTime | fmtTime('YYYY-MM-DD') | truncatTime }}</h2>
    </div>

    <script type="text/javascript">
        // 全局过滤器
        Vue.filter("truncatTime", function(value){
            return value.slice(0, 4)
        })
        new Vue({
            el:"#container",
            data:{
                showTime: 1735647365663
            },
            filters:{
                // str 默认参数 赋值
                fmtTime(value, str='YYYY-MM-DD HH:mm:ss'){
                    return dayjs(value).format(str)
                }
            }
        })
    </script>
</body>
</html>

 

posted @ 2024-12-31 20:39  市丸银  阅读(13)  评论(0)    收藏  举报