目录
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日'来指定格式化为年月日的形式。
效果展示
总结
过滤器:
定义: 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法:
- 注册过滤器: Vue.filter(name, callback）或 new Vue{filters:{3}}
- 使用过滤器: {{ xxx │ 过滤器名}} 或 v-bind:属性=“xxx | 过滤器名"
备注:
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据，是产生新的对应的数据
