filter过滤器
vue2.0以后,系统定义的filter全部移除,但是还允许自定义filter过滤器。
一、过滤器概念
在html模板中,对要显示的数据进行过滤和格式化。
二、自定义过滤器
filter过滤器,需要全局性定义。即添加到Vue函数对象上。
Vue.filter( filterName, function( value[, arg1, arg2,...] ){
//进行数据过滤和格式化,然后返回格式化后的数据。
return filterValue;
} );
三、使用过滤器
filter会自动将 过滤器符号(|)前面的数据,当做第一个参数,filter函数括号里面的参数,当做第二个,第三个…的参数。
<div>{{ myData | filterName }}</div>
<div>{{ myData | filterName( arg ) }}</div>
四、filter自定义并使用
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
</head>
<body >
<div id="app" >
#要过滤的数据,永远是第一个参数;通过filter函数,传递的参数,依次排在后面。
<p>{{ new Date() | dateString }}</p>
<p>{{ new Date() | dateString('YYYY-MM-DD') }}</p>
<p>{{ new Date() | dateString('YYYY-MM-DD', count) }}</p>
</div>
<script>
//自定义过滤器,全局范围内使用.
Vue.filter( 'dateString', function( date, format, count ){
return moment( date ).format(format || "YYYY-MM-DD HH:mm:ss") + (count ? (" -- " +count) : '');
} );
const vm = new Vue({
el : '#app',
data: {
count: 10
}
});
</script>