通过事例讲解如果在 Vue 创建及使用过滤器

2024-12-11 21:23

关注

[[330672]]

定义和使用过滤器

使用 Vue，我们可以通过两种不同的方式注册过滤器：全局和本地。前者方式可以访问所有组件中的过滤器，而后者则只能在定义该组件的组件内部使用过滤器。

过滤器是简单的 JS 函数，它们将要转换的值作为第一个参数，但是也可以传入尽可能多的其他参数来返回该值的格式化版本。

全局过滤器

全局过滤器如下所示：

// 在此示例中，我们将注册一个全局过滤器用来在价格前面添加美元符号： 
 
// 声明 
Vue.filter('toUSD', function (value)) { 
  return `$${value}` 
} 
// 使用 
"app"> 
  {{ 351.99 | toUSD }}

过滤器定义必须始终在主Vue实例之上，否则会得到一个Failed to resolve filter: toUSD错误。

// DECLARATION 
Vue.filter('toUSD', function (value) { 
    return `$${value}`; 
}); 
 
new Vue({ 
    el: '#app', 
 
     data: { 
        price: 351.99 
    } 
}); 
 
// USAGE 
"app"> 
  {{ price | toUSD }}

本地过滤器

本地过滤器注册到一个Vue组件作用域中，来看看如何创建：

// 在此示例中，我们将创建一个过滤器，将字符串变成大写。 
 
// 声明 
new Vue({ 
    el: '#app', 
 
    data: { 
        name: 'scotch.io' 
    }, 
 
    filters: { 
       // Filter definitions 
        Upper(value) { 
            return value.toUpperCase(); 
        } 
    } 
}); 
 
// 用法 
"app"> 
  {{ name | Upper }}

如上面的示例中看到的那样，本地过滤器作为“filters”属性内的函数存储在Vue组件中。我们可以注册任意多个：

... 
    filters: { 
        Upper(value) { 
              return value.toUpperCase(); 
        }, 
        Lower(value) { 
            return value. toLowerCase(); 
        }, 
    } 
....

附加参数设置

正如我们在本文引言中所提到的，过滤器可以根据需要接受任意多个参数

// 声明 
Vue.filter('readMore', function (text, length, suffix) { 
    return text.substring(0, length) + suffix; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ab modi repellendus labore facere, fugiat ipsam quae accusantium commodi voluptas nesciunt dolor similique ipsum accusamus earum eligendi suscipit laborum quod.' 
    } 
}); 
 
// 用法 
"app"> 
  {{ text | readMore(10, '...') }}

在此示例中，我们创建了一个名称为“readMore”的过滤器，该过滤器会将字符串的长度限制为给定的字符数，并且还会在其中添加所选择的后缀。Vue.js 将要过滤的值作为第一个参数 text 传递，length 和 suffix 作为第二个和第三个参数传递。

链式过滤器

关于过滤器，我最喜欢的一点是能够使用管道(|)符号将它们链接起来，并通过一系列转换器运行单个值。再举一个价格的例子，我们想限制价格的小数位以及加价格的单位。

// JS 
Vue.filter('toFixed', function (price, limit) { 
    return price.toFixed(limit); 
}); 
 
Vue.filter('toUSD', function (price) { 
    return `$${price}`; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        price: 435.333 
    } 
}); 
 
// HTML 
 
"app"> 
  {{ price | toFixed(2) | toUSD }}

示例

接下来，我们通过一些事例来巩固一下。

将 JS 值转换为JSON字符串

// JS 
Vue.filter('json', function (value) { 
    return JSON.stringify(value); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        user: { 
            username: 'johndoe', 
            email: 'john@example.com', 
            countryCode: 'U.K.' 
        } 
    } 
}); 
 
 
// HTML 
"app"> 
  {{ user | json }}

从对象数组中提取属性值列表

Vue.filter('pluck', function (objects, key) { 
    return objects.map(function(object) {  
        return object[key]; 
    }); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        users: [ 
        { 
            "id": 4, 
            "first_name": "Eve", 
            "last_name": "Holt" 
        }, 
        { 
            "id": 5, 
            "first_name": "Charles", 
            "last_name": "Morris" 
        }, 
        { 
            "id": 6, 
            "first_name": "Tracey", 
            "last_name": "Ramos" 
        } 
        ] 
    } 
}); 
 
 
// HTML 
 
"app"> 
  {{ users | pluck('last_name') }}

返回给定索引处的元素

Vue.filter('at', function (value, index) { 
    return value[index]; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        videos: ['Zi_XLOBDo_Y', 'sOnqjkJTMaA', 'sOnqjkJTMaA'] 
    } 
}); 
 
// HTML 
"app"> 
  {{ videos | at(1) }}

返回给定列表中的最小值

// JS 
Vue.filter('min', function (values) { 
    return Math.min(...values); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        ages: [23, 19, 45, 12, 32] 
    } 
}); 
 
// HTML 
 
"app"> 
  {{ ages | min }}

随机排列元素列表：

Vue.filter('shuffle', function (values) { 
    for (var i = values.length - 1; i > 0; i--) { 
        var j = Math.floor(Math.random() * (i + 1)); 
        var temp = values[i]; 
        values[i] = values[j]; 
        values[j] = temp; 
    } 
    return values; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        cards: ['Lahire', 'Judith', 'Lancelot', 'Alexandre'] 
    } 
}); 
 
// HTML 
 
"app"> 
  {{ cards | shuffle }}

返回数组的第一个元素：

Vue.filter('first', function (values) { 
    if(Array.isArray(values)) { 
        return values[0]; 
    } 
    return values; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        consoles: ['PlayStation', 'Nintendo DS', 'Xbox', 'Atari'] 
    } 
}); 
 
// HTML 
"app"> 
  {{ consoles | first }}

返回数组的最后一个元素

Vue.filter('last', function (values) { 
    if(Array.isArray(values)) { 
        return values[values.length - 1]; 
    } 
    return values; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        consoles: ['PlayStation', 'Nintendo DS', 'Xbox', 'Atari'] 
    } 
}); 
 
// HTML 
"app"> 
  {{ consoles | last }}

返回过滤指定元素的数组的副本

Vue.filter('without', function (values, exclude) { 
    return values.filter(function(element) { 
        return !exclude.includes(element); 
    }); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        unpaidInvoices: ['#1001', '#1002', '#1003', '#1004'] 
    } 
}); 
 
// HTML 
"app"> 
  {{ unpaidInvoices | without('#1003') }}

删除数组中重复的元素

Vue.filter('unique', function (values, unique) { 
    return values.filter(function(element, index, self) { 
        return index == self.indexOf(element); 
    }); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        recentViewedPosts: [13, 43, 23, 13, 43, 3, 98, 42, 65] 
    } 
}); 
 
// HTML 
 
"app"> 
  {{ recentViewedPosts | unique }}

在字符串后加上文本

Vue.filter('prepend', function (string, prepend) { 
    return `${string}${prepend}`; 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        greeting: 'Hello' 
    } 
}); 
 
// HTML 
"app"> 
  {{ greeting | prepend(' World!') }}

重复一个字符串n次

Vue.filter('repeat', function (string, times) { 
    return string.repeat(times); 
}); 
 
new Vue({ 
    el: '#app', 
 
    data: { 
        greeting: 'Hello' 
    } 
}); 
 
// HTML 
 
"app"> 
  {{ greeting | repeat(3) }}