Vue中怎么创建并使用过滤器

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

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

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

在字符串后加上文本

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

重复一个字符串n次

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

关于 Vue中怎么创建并使用过滤器问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。