1、简介
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。
过滤器可以用在两个地方:
-
双花括号插值{{}}
-
v-bind
表达式 (后者从 2.1.0+ 开始支持)。
Vue.js支持在{{}}插值的尾部添加一个管道符“(|)”对数据进行过滤,
自定义规则
过滤的规则是自定义的,通过给Vue示例添加选项filters来设置过滤器是 JavaScript 函数,因此可以接收参数。
展现形式
{{ message | filterA('arg1', arg2) }}
过滤器可以串联
{{ message | filterA | filterB }}
2、全局过滤器
我们在一个页面创建多个vue实例,并调用第三方时间控件来处理时间:dayjs git
dayjs().format(); // 2020-09-08T13:42:32+08:00
dayjs().format('YYYY-MM-DD'); // 2020-09-08
dayjs().format('YYYY-MM-DD HH:mm:ss'); // 2020-09-08 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss'); // 2011-10-17 00:17:56
<!-- 导入dayJs 库 -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="js/vue.js"></script>
<body>
<div id="app1">
<p>{{ time |dateFormat }}</p>
</div>
<div id="app2">
<p>{{time | dateFormat}}</p>
</div>
<script>
// 全局的过滤器
//过滤器名称用''引起来,并且必须有返回值
Vue.filter('dateFormat', function (val) {
// 直接调用dayJs得到的是当前时间
// dayjs().format()
// dayJs(给定的时间)得到的是指定的时间
return dayjs(val).format('YYYY-MM-DD')
})
var vm1 = new Vue({
el: "#app1",
data: {
time: new Date()
},
})
var vm2 = new Vue({
el: "#app2",
data: {
time: new Date()
},
})
</script>
</body>
</html>
3、自定义过滤器
在vue1中创建了自定义过滤器,可以在app1中使用,但到app2中是无法使用,因为过滤器的范围是当前实例中
过滤器串接<p>{{ time |dateFormat|dateFormat2 }}</p>
会按照由左向右的顺序执行,当dateFormat2和dateFormat的顺序颠倒时也会产生不同的效果
<!-- 导入dayJs 库 -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="js/vue.js"></script>
<body>
<div id="app1">
<p>{{ time |dateFormat | dateFormat2 }}</p>
</div>
<div id="app2">
<p>{{time | dateFormat}}</p>
</div>
<script>
// 全局的过滤器
Vue.filter('dateFormat', function (val) {
// dayJs(给定的时间)得到的是指定的时间
return dayjs(val).format('YYYY-MM-DD')
})
Vue.filter('upper', function (val) {
return val.toUpperCase();
})
var vm1 = new Vue({
el: "#app1",
data: {
time: new Date()
},
filters: {
dateFormat2(val) {
return dayjs(val).format("YYYY-MM-DD HH:mm:ss")
}
}
})
var vm2 = new Vue({
el: "#app2",
data: {
time: new Date()
},
})
</script>
</body>
</html>