<!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>过滤器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引⼊⽇期处理库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<!-- 过滤器的使⽤ -->
<h2>{{time | fmTime}}</h2>
<h3>{{msg | myslice}}</h3>
</div>
</body>
<script>
//全局注册过滤器‘
Vue.filter('myslice', function (value) {
return value.slice(0, 4)
})
new Vue({
el: '#root',
data: {
time: Date.now(),
msg: 'hello briup'
},
//过滤器配置项
//局部注册过滤器
filters: {
fmTime(value) {
return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
}
}
});
</script>
</html>
过滤器: 定义:对要显示的数据进⾏特定格式化后再显示(适应于⼀些简单逻辑的处理)
语法:
1.注册过滤器:Vue.filter(name,callback)
2.使⽤过滤器:{{ xxx | 过滤器名称}} 或者 v-bind:属性 = "xxx | 过滤器名"
注意: 1.过滤器可以接受额外参数,多个过滤器也可以串联
2.并没有改变原本的数据,是产⽣新的对应数据