Vue——day09之过滤器

本文主要是介绍Vue——day09之过滤器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue过滤器介绍

示例代码

效果展示

总结

Vue过滤器介绍

Vue过滤器是一种用于对数据进行特定格式化的工具，可以在模板中使用管道符（|）来应用过滤器。过滤器在显示数据之前，可以对数据进行一些简单的逻辑处理，从而使数据更易读或更符合特定的需求。

在Vue中，有两种方式来定义和使用过滤器：

全局过滤器：
- 定义全局过滤器：可以使用Vue.filter(name, callback)来注册全局过滤器。name是过滤器的名称，callback是过滤器的回调函数。通过全局注册，可以在应用的任何地方使用该过滤器。
- 使用全局过滤器：在模板中使用过滤器时，需要在要显示的数据后面使用管道符（|）跟上过滤器的名称。例如：{{ data | filterName }}。可以在一行中使用多个过滤器，过滤器会按照从左到右的顺序依次应用。
局部过滤器：
- 定义局部过滤器：在Vue实例的filters选项中，可以定义局部过滤器。局部过滤器只在当前Vue实例中可用。
- 使用局部过滤器：在模板中使用局部过滤器时，需要在要显示的数据后面使用管道符（|）跟上过滤器的名称。例如：{{ data | filterName }}。可以在一行中使用多个过滤器，过滤器会按照从左到右的顺序依次应用。

过滤器的回调函数接收要过滤的数据作为第一个参数，并可以接收额外的参数。可以在过滤器的定义时指定参数，也可以在使用过滤器时传递参数。

需要注意的是，过滤器并不会改变原本的数据，而是产生一个新的对应的数据。过滤器仅在模板中起作用，不会对原始数据进行修改。因此，在Vue中，过滤器主要用于在模板中对数据进行格式化和展示。如果需要对数据进行修改，应该使用计算属性或方法来实现。

示例代码

<!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>
</head>
<body><div id="root"><h2>显示格式化后的时间</h2><h3>计算属性实现==》现在是:{{fmtTime}}</h3><h3>methods实现==》现在是:{{getFmtTime()}}</h3><br><hr><br><h3>过滤器实现==》现在是:{{time | timeFormater}}</h3><h3>过滤器实现==》现在是:{{time | timeFormater('YYYY年MM月DD日') | mySlice}}</h3><br><hr><br><h3 :x="msg | mySlice">masoul</h3></div><br><hr><br><div id="root2"><h2>{{message | mySlice}}</h2></div>
</body><script type="text/javascript">Vue.config.productionTip=false// 配置全局过滤器Vue.filter('mySlice',function(value){return value.slice(0,4)})new Vue({el:'#root',data:{// 时间戳time:1725418344968,msg:'你好wenjgo'},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(value,str='YYYY年MM月DD日 HH:mm:ss'){return dayjs(value).format(str)},mySlice(value){return value.slice(0,4)}}});new Vue({el:'#root2',data:{message:'我是第二个vue'}})
</script>
</html>

这段代码涉及到Vue过滤器的知识点有：

注册全局过滤器：通过Vue.filter(name, callback)来注册全局过滤器。在代码中使用了全局过滤器mySlice，它会对传入的value进行截取前4个字符的操作。
局部过滤器：通过在Vue实例的filters选项中定义过滤器来注册局部过滤器。在代码中使用了局部过滤器timeFormater，它接收两个参数，value为传入的时间戳，str为要格式化的字符串。通过dayjs库对时间戳进行格式化，并返回格式化后的结果。
使用过滤器：在代码中通过{{ xxx | 过滤器名 }}或v-bind:属性="xxx | 过滤器名"的方式使用过滤器。例如，通过{{time | timeFormater}}将时间戳time格式化显示，通过{{time | timeFormater('YYYY年MM月DD日') | mySlice}}将时间戳time格式化显示，并截取前4个字符。
过滤器串联：通过在使用过滤器时使用多个过滤器，可以实现过滤器的串联。例如，在代码中通过{{time | timeFormater('YYYY年MM月DD日') | mySlice}}将时间戳time先进行时间格式化，再进行字符截取操作。
过滤器接收额外参数：在局部过滤器timeFormater中，可以传入额外的参数str来指定要格式化的时间字符串。在代码中，通过给过滤器传入参数'YYYY年MM月DD日'来指定格式化为年月日的形式。