Vue2基础 12：过滤器

Fxcrisp

已于 2024-06-02 23:19:54 修改

阅读量918

点赞数 17

分类专栏： Vue.js 文章标签： javascript vue.js 开发语言

于 2024-06-02 23:18:06 首次发布

本文链接：https://blog.csdn.net/fxcrisp/article/details/139399520

版权

Vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

过滤器

1 案例：显示格式化后的时间戳--插值语法
2 过滤器的数据加工
3 全局过滤器
4 v-bind--动态属性使用过滤器
总结

1 案例：显示格式化后的时间戳–插值语法

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

dayjs是第三方库bootcdn上的一个轻量的JS日期处理类库，用来解析、检验、操作、以及显示日期，与Moment.js的API设计相同。
点击前往下载
引入后多了全局函数dayjs

1.1 计算属性实现

<div id="root">
    <h3>现在是：{{fmtTime}}</h3>
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            time:1710743425
        },
        
        computed:{
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                //不传参数即为当前的时间
            }
        }
    })
</script>

1.2 methods实现

<div id="root">
    <h3>现在是：{{getfmtTime}}</h3>
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            time:1710743425
        },
        
        methods:{
            getfmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
                //不传参数即为当前的时间
            }
        }
    })
</script>

1.3 过滤器实现

<div id="root">
    <h3>现在是：{{time | timeformater}}</h3>
    <!--过滤器传参写法，前一个为第一个参数，自己的为第二个参数-->
    <h3>现在是：{{time | timeformater2('YYYY年MM月DD日')}}</h3>
    <!--过滤器的串联写法-->
    <h3>现在是：{{time | timeformater2('YYYY年MM月DD日') | myslice}}</h3>
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            time:1710743425//时间戳
        },
        
        //----------- 局部过滤器（只能该Vue实例使用） ----------
        filters:{
            timeFormater(value){
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
            },
            timeFormater2(value,str='YYYY年MM月DD日 HH:mm:ss'){
                return dayjs(value).format(str)
                //在参数中写入内容，即可以在插值语法没给参数时使用该参数
            },
            myslice(value){
                return value.slice(0,4)
            }
        }
    })
</script>

2 过滤器的数据加工

{{time | timeformater}}

3 全局过滤器

<div id="root2">
    <h3>{{msg | myslice}}</h3>
</div>
<script type="text/javascript">
    
    //---------- 在此处定义全局过滤器 ------------
    Vue.filter('myslice',function(value){
        return value.slice(0,4)
    })
    
    new Vue({
        el:'#root2',
        data:{
            msg: 'hello world'
        }
    })
</script>

4 v-bind–动态属性使用过滤器

<div id="root">
    <h3 :x="msg | myslice">fx</h3>
    <!-- x为动态属性 -->
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            msg:'你好！'
        },
        filters:{
            myslice(value){
                return value.slice(0,4)
            }
        }
    })
</script>

注意：v-model不能使用

总结

定义：对要显示的数据进行特定的格式化后再显示（适用于简单逻辑的处理）
语法:
1）注册过滤器：全局Vue.filter(name,callback) 或局部 new Vue{filter:{}}
2）使用过滤器：插值语法{{data | 过滤器名}} 或 v-bind:属性 = "data | 过滤器名"
注意：
1）过滤器可以有额外的参数、多个过滤器可以串联
2）过滤器没有改变原本的数据，时产生新的对应的数据