七、VUE过滤器

DAIHAO丶

已于 2024-05-28 10:52:41 修改

阅读量282

点赞数 10

分类专栏： # VUE 文章标签： vue.js javascript 前端

于 2024-05-09 14:21:04 首次发布

本文链接：https://blog.csdn.net/D_A_I_H_A_O/article/details/138314753

版权

VUE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、初识VUE3
二、再识VUE3-MVVM
三、VUE3数据代理
 四、VUE3事件处理
 五、VUE3计算属性
 六、Vue3监视属性
 七、VUE3过滤器
 七、VUE3内置指令
 九、VUE3组件
 十、VUE3生命周期

过滤器：

对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue中过滤器</title>
    <script src="./vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
<div id="root">

    <h1>显示格式化后的时间</h1>

    <!--计算属性实现-->
    <h2>现在是:{{ fmtTime }}</h2>

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

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

    <!--过滤器也可以传递参数-->
    <h2>现在是:{{ time | timeFormater('YYYY-MM-DD') | mySlice }}</h2>

    <h3 >{{ msg | mySlice }}</h3>

</div>
<script type="text/javascript">
    //自定义过滤器 要new vue实例之前确定
    Vue.filter('mySlice', function (val){
        return val.slice(0,4);
    });

   const vm =new Vue({
       el: "#root",
        data (){
            return {
                time: 1714375137000,
                msg: "你好世界!"
            }
        },
       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(val, formate = 'YYYY-MM-DD HH:mm:ss'){
               return dayjs(val).format(formate)
           }
       }
    })



</script>
</body>
</html>