vue教程 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>

发布了58 篇原创文章 · 获赞 34 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_36723759/article/details/104464510
今日推荐