在Vue创建及使用过滤器

更新日期: 2020-05-20阅读: 1.7k标签: 过滤

angularJS 类似,vue.js 也有自己的数据转换和过滤方法,但是必须记住,过滤器并不改变原始数据,它们只改变输出并返回过滤后的数据。过滤器在很多不同的情况下都很有用,比如保持api响应尽可能干净,在前端处理数据的格式。希望通过将所有逻辑封装在可重用代码块之后来避免重复和连接的情况下,它们同样非常有效。


定义和使用过滤器

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

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


全局过滤器

全局过滤器如下所示:

// 在此示例中,我们将注册一个全局过滤器用来在价格前面添加美元符号:

// 声明
Vue.filter('toUSD', function (value)) {
  return `$${value}`
}
// 使用
<div id="app">
  <span>{{ 351.99 | toUSD }}</span>
</div>

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

// DECLARATION
Vue.filter('toUSD', function (value) {
    return `$${value}`;
});

new Vue({
    el: '#app',

     data: {
        price: 351.99
    }
});

// USAGE
<div id="app">
  <span>{{ price | toUSD }}</span>
</div>


本地过滤器

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

// 在此示例中,我们将创建一个过滤器,将字符串变成大写。

// 声明
new Vue({
    el: '#app',

    data: {
        name: 'scotch.io'
    },

    filters: {
       // Filter definitions
        Upper(value) {
            return value.toUpperCase();
        }
    }
});

// 用法
<div id="app">
  <span>{{ name | Upper }}</span>
</div>

如上面的示例中看到的那样,本地过滤器作为“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.'
    }
});

// 用法
<div id="app">
  <span>{{ text | readMore(10, '...') }}</span>
</div>

在此示例中,我们创建了一个名称为“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

<div id="app">
  <span>{{ price | toFixed(2) | toUSD }}</span>
</div>


示例

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

将 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
<div id="app">
  <span>{{ user | json }}</span>
</div>

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

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

<div id="app">
  <span>{{ users | pluck('last_name') }}</span>
</div>

返回给定索引处的元素

Vue.filter('at', function (value, index) {
    return value[index];
});

new Vue({
    el: '#app',

    data: {
        videos: ['Zi_XLOBDo_Y', 'sOnqjkJTMaA', 'sOnqjkJTMaA']
    }
});

// HTML
<div id="app">
  <span>{{ videos | at(1) }}</span>
</div>

返回给定列表中的最小值

// JS
Vue.filter('min', function (values) {
    return Math.min(...values);
});

new Vue({
    el: '#app',

    data: {
        ages: [23, 19, 45, 12, 32]
    }
});

// HTML

<div id="app">
  <span>{{ ages | min }}</span>
</div>

随机排列元素列表:

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

<div id="app">
  <span>{{ cards | shuffle }}</span>
</div>

返回数组的第一个元素:

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
<div id="app">
  <span>{{ consoles | first }}</span>
</div>

返回数组的最后一个元素

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
<div id="app">
  <span>{{ consoles | last }}</span>
</div>

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

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
<div id="app">
  <span>{{ unpaidInvoices | without('#1003') }}</span>
</div>

删除数组中重复的元素

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

<div id="app">
  <span>{{ recentViewedPosts | unique }}</span>
</div>

在字符串后加上文本

Vue.filter('prepend', function (string, prepend) {
    return `${string}${prepend}`;
});

new Vue({
    el: '#app',

    data: {
        greeting: 'Hello'
    }
});

// HTML
<div id="app">
  <span>{{ greeting | prepend(' World!') }}</span>
</div>

重复一个字符串n次

Vue.filter('repeat', function (string, times) {
    return string.repeat(times);
});

new Vue({
    el: '#app',

    data: {
        greeting: 'Hello'
    }
});

// HTML

<div id="app">
  <span>{{ greeting | repeat(3) }}</span>
</div>


总结

希望读者们从这篇文章中能学到了一些东西,现在知道如何创建和使用过滤器,最重要的是,你现在可以重构你的代码,用过滤器来清理它。

原文:https://scotch.io/


链接: https://www.fly63.com/article/detial/9327

es6 filter() 数组过滤方法总结

创建一个数组,判断数组中是否存在某个值,也可以通过上面方法过滤掉num为2的留下num为1的,去掉空数组空字符串、undefined、null

JS的filter用法

filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

vue指令v-html中使用过滤器filters功能

Vue 2.0 不再支持在 v-html 中使用过滤器解决方法:使用全局方法:可以在 Vue 上定义全局方法:然后所有地方上都可以直接用这个方法了:$options.filters:在定义的vue里的filter添加方法

过滤器vue.filters的使用

写项目的时候,有一些方法我们是需要全局使用的,比如数字的四色五入保留小数点啊、一些工具方法、字符的格式化啊等等。这些很多页面需要用的、使用频率极高的方法,我们一般会将其封装为全局的方法;我以前是这样做的,有这么几种方式:

js数组对象过滤:filter,find,some,every

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。find() 对于空数组,函数是不会执行的。

VUE中的filters过滤器2种用法

Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!