vue 过滤器管道符 {{ | }}

原创已于 2022-02-24 13:56:11 修改 · 8.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue

于 2021-04-24 01:47:27 首次发布

vue 专栏收录该内容

19 篇文章

订阅专栏

这篇博客介绍了Vue.js中的过滤器如何使用，特别是如何通过管道符`|`来处理数据，并在模板中传递参数给过滤器方法。示例展示了如何创建一个名为`afterTime`的过滤器，用于从日期字符串中提取时间部分，并演示了如何在过滤器中接收额外的参数，如传递`'params'`到过滤器方法中。这有助于理解Vue.js中的数据处理和视图渲染。

过滤器又称管道符 : | ←就是这个竖线! 叫管道符

将一串数据A拿去处理,处理完之后继续拿来用,且不会影响原来的数据A,也不会改变

是一个方法?通过参数的方式接受处理的数据,通过返回值的方式告诉Vue显示什么

过滤器 — Vue.js

<template>}{{item.addtime | afterTime }}</template>

<script> 写在export default里面的data同级后面

filters:{

afterTime(value){

console.log(value);

let timeArr=value.split('T');

return timeArr[0];

}

},

</script>

如果想在filter方法中传递参数时，如下：

<template>}{{item.addtime | afterTime('params') }}</template>

<script> 写在export default里面的data同级后面

filters:{

    afterTime(value,params){

        console.log(value);

        let timeArr=value.split('T');

        return timeArr[0];

    }

},

</script>