Vue学习：过滤器

最新推荐文章于 2023-11-28 15:15:44 发布

¡Venceremo

最新推荐文章于 2023-11-28 15:15:44 发布

阅读量96

点赞数

分类专栏： Vue 文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129042803

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

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

显示格式化之后的时间（即时间戳）

Date.now()

1676441811559

解析时间的第三方库:moment.js(但是体积比较大)dayjs （比较小）

使用计算属性来得出，

    <!-- 准备容器 -->
    <div id='root'>
       <h2>显示格式化之后的时间</h2>
       <h3>格式前：{{time}}</h3>
       <h3>格式后：{{fmTime}}</h3>

        </form>

    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                time:1676441811559,

            },
            computed:{
                fmTime(){
                    return dayjs(this.time). format('YYYY年MM月DD日 HH:mm:ss')
                }
            }

        });

使用methods方法

methods
       <h3>格式后：{{getFmtTime()}}</h3>

  methods: {
                getFmtTime(){
                    return dayjs(this.time). format('YYYY-MM-DD HH:mm:ss')
                }

使用过滤器：不传参（过滤器：捕获time 然后作为参数传递给filterTime 返回值替换掉整个语法）

  过滤器：捕获time 然后作为参数传递给filterTime 返回值替换掉整个语法
        <h3>格式后：{{time | filterTime}}</h3>

   filters:{
              
                filterTime(val,){//函数  返回值替换掉整个语法
                    console.log(val)
                    return dayjs(val). format(YYYY-MM-DD HH:mm:ss)
                }
            }

传参：想要一个过滤器实现不同的效果可以传参参数作为第2个值

 <h3>格式后：{{time | filterTime('YYYY年MM月DD日')}}</h3>

            filters:{
                //ES6形参默认值 如果a有值 就用传递的值 如果没有 就直接使用默认值
                filterTime(val,a='YYYY-MM-DD HH:mm:ss'){//函数  返回值替换掉整个语法
                    console.log(val)
                    return dayjs(val). format(a)
                }
            }

多个过滤器之间可以串联进行过滤器的串联（将第一个参数传递给第1个过滤器返回值作为第2个过滤器的参数）一层一层

 <h3>格式后：{{time | filterTime('YYYY年MM月DD日') | mySilce}}</h3>

            filters:{
                //ES6形参默认值 如果a有值 就用传递的值 如果没有 就直接使用默认值
                filterTime(val,a='YYYY-MM-DD HH:mm:ss'){//函数  返回值替换掉整个语法
                    console.log(val)
                    return dayjs(val). format(a)
                },
                mySilce(val){
                    return val.slice(0,4)//截取前四位
                }
            }

全局过滤器必须在vUE之前 Vue.filter

      Vue.filter('mySilce',function(val){
                    return val.slice(0,4)//截取前四位
                })

过滤器不一定非得在插值语法上在v-bind也可以’

    <h1 :x="url | mySilce">xccccccxx</h1>
 url:'shdiasuiu'

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
    <script type="text/javascript" src="./js引入/测试版本/vue.js"></script>
</head>

<body>
    <!-- 计算属性实现 -->
    <!-- 准备容器 -->
    <div id='root'>
       <h2>显示格式化之后的时间</h2>
       <h3>格式前：{{time}}</h3>
       <hr>
       计算属性
       <h3>格式后：{{fmTime}}</h3>
       <hr>
      methods
       <h3>格式后：{{getFmtTime()}}</h3>
       <hr>
       过滤器：捕获time 然后作为参数传递给filterTime 返回值替换掉整个语法
        <h3>格式后：{{time | filterTime}}</h3>
        想要一个过滤器实现不同的效果 可以传参 参数作为第2个值
        <h3>格式后：{{time | filterTime('YYYY年MM月DD日')}}</h3>
        进行过滤器的串联（将 第一个参数传递给第1个过滤器 返回值作为第2个过滤器的参数）
        <h3>格式后：{{time | filterTime('YYYY年MM月DD日') | mySilce}}</h3>

        <h1 :x="url | mySilce">xccccccxx</h1>


    </div>
    <div id="root2">
        <h2>{{name | mySilce}}</h2>
    </div>
    <script>
        Vue.filter('mySilce',function(val){
                    return val.slice(0,4)//截取前四位
                })

        new Vue({
            el: '#root',
            data: {
                time:1676441811559,
                url:'shdiasuiu'

            },
            computed:{
                fmTime(){
                    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:{
                //ES6形参默认值 如果a有值 就用传递的值 如果没有 就直接使用默认值
                filterTime(val,a='YYYY-MM-DD HH:mm:ss'){//函数  返回值替换掉整个语法
                    console.log(val)
                    return dayjs(val). format(a)
                },
              
            }

        });
       new Vue({ 
        el: '#root2',
        data: {
            name:"ssssxxxxx"

        },
        
       });
    </script>
</body>

</html>

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

1、注册全局过滤器 Vue.filter(名字，回调函数)

局部过滤器 new Vue{filters:{名字，回调函数}}

2、使用过滤器：{{xxx|过滤器名字}} 或者 v-bind：属性="xxx|过滤器名"

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

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

¡Venceremo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习：过滤器

多个过滤器之间可以串联进行过滤器的串联（将第一个参数传递给第1个过滤器返回值作为第2个过滤器的参数）一层一层。使用过滤器：不传参（过滤器：捕获time 然后作为参数传递给filterTime 返回值替换掉整个语法）2、使用过滤器：{{xxx|过滤器名字}} 或者 v-bind：属性="xxx|过滤器名"过滤器：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）过滤器：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）3、过滤器可以接收额外参数、多个过滤器也可以串联。
复制链接

扫一扫