现代 CSS

Vue 2.0的学习笔记:Vue的过滤器

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

在这篇文章里,我们将讨论一个叫过滤器的东西。过滤器提供了一种执行文本转换的方法,比如说都转成大写字母或者几乎做任何我们想做的事情。过滤器既可以在文本插值中使用,也可以在v-bind指令的表达式中使用。

在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式。首先我们要知道,Vue中的过滤器不能替代Vue中的methodscomputed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。不过,在Vue 2.0中已经没有内置的过滤器了,我们必须要自己来构建它们。

接下来,来学习Vue中有关于过滤器更多的知识。如何创建和使用它们。感兴趣的同学,接着一起往下看吧。

Vue默认过滤器

如果你不是第一次接触Vue的话,你应该知道Vue 2.0以前的版本是有内置的过滤器,但是他们从Vue 2.0版本中删除了。Vue的作者是这样说的:

内置的过滤器是有用的,但它们缺乏纯JavaScript的灵活性。当一个内置函数不适合您的需求时,您最终会重新实现类似功能(在最终代码中,内置的代码就成无用代码,死代码),或者必须等待Vue更新它们并发布新版本。

知道Vue内置的过滤器只有在Vue 2.0以前版本中有就可以,不过你要是对旧版本的内置过滤器感兴趣的话,可以到官网浏览旧版本指南或教程。在这里有一个旧的内置过滤器的完整列表,以防你想了解更多关于它们的信息。

不过我们今天要学习的可不是Vue旧版本的内置过滤器,咱们学习如何在Vue 2.0版本中自定义过滤器。

定义和使用过滤器

使用Vue,可以有两种不同的方式注册过滤器:全局和本地过滤器。你可以跨所有组件访问全局过滤器,而本地过滤器只允许你在其定义的组件内部使用。

我们可以定义本地(在某一个template里面定义filter)过滤器,或者定义全局(global)过滤器。需要提醒的是,如果你定义了一个全局过滤器,它必须在Vue实列之前定义,以上两种方式,我们将传递value作为参数。

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

全局过滤器

来看一个简单的示例。下面这个示例演示的是注册一个全局过滤器,其作用就是在价格前面加上美元符号:

// 声明一个全局的过滤器
Vue.filter('toUSD', function (value) {
    return `$${value}`
})

// 在模板中这样使用 文本插值的使用方式
<div id="app">
    <h1>{{ price | toUSD}}</h1>
</div>

特别声明: 过滤器定义必须始终位于Vue实例之上,否则你将会得到一个“Failed to resolve filter: toUSD”的错误信息。

本过过滤器

本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写:

let app = new Vue({
    el: '#app',
    data () {
        return {
            name: 'w3cplus.com'
        }
    },
    // 声明一个本地的过滤器
    filters: {
        Upper: function (value) {
            return value.toUpperCase()
        }
    }
})

<div id="app">
    <h1>{{ name | Upper }}</h1>
</div>

正如上例中看到的,本地过滤器存储在Vue组件中,作过filters属性中的函数。这个时候你想注册多少个就能注册多少个:

let app = new Vue({
    el: '#app',
    data () {
        return {
            name: 'w3cplus.com'
        }
    },
    // 声明一个本地的过滤器
    filters: {
        Upper: function (value) {
            return value.toUpperCase()
        },
        Lower: function (value) {
            return value.toLowerCase()
        }
    }
})

添加参数

正如前面提到过的,过滤器可以根据你需要添加一些参数进来。我们来看一个示例。比如说,我们创建博客的时候,都会有文章列表,每篇博客将会有一个文章摘要,然后提供一个“阅读更多”的功能。我们这个示例就是来创建一个名为readMore的过滤器,它将把字符串的长度限制为给定的字符数,并将其附加到你的选择的后缀中。Vue将被过滤的值作为第一个文本和长度,后缀作为第二个和第三个参数。示例代码看起来像这样:

// 声明一个全局的过滤器readMore
// 这个过滤器传了三个参数:text, length, suffix
Vue.filter('readMore', function (text, length, suffix) {
    return text.substring(0, length) + suffix
})

let app = new Vue({
    el: '#app',
    data () {
        return {
            articles: [
                {
                    title: 'CSS :focus-within',
                    summary: 'CSS的世界真是一个神奇的世界。可能众多前端开发者听说过:focus并未听说过:focus-within。那么:focus-within是什么鬼。这篇文章,我们就说说:focus-within这个东东。在CSS中:focus-within是一个伪类,现在已经被列入到CSS选择器中(CSS Level 4 selector)。他就像你知道的:focus或者:hover。:focus-within能非常方便处理获取焦点状态。当元素本身或其后代元素获得焦点时,:focus-within伪类的元素就会有效。'
                    link: '//www.w3cplus.com/css/focus-within.html'
                },
                {
                    title: '如何改变表单控件光标颜色',
                    summary: '表单大家应该不陌生,当然了,今天并不是来聊怎么做表单或者处理表单的样式网格。而是来聊聊怎么改变表单控件中光标的颜色。不知道在大家心中,表单控件的光标颜色是根据color属性来控制的。那么如果需要用CSS来改变表单控件,比如说input或者textarea元素的光标颜色,应该怎么处理呢?',
                    link: '//www.w3cplus.com/css/caret-color.html'
                }
            ]
        }
    }
})

<div id="app">
    <ul>
        <li v-for="article in articles">
            <h2><a :href="article.link">{{ article.title }}</a></h2>
            <div class="summary">{{ article.summary | readMore(100, '...') }}</div>
            <div class="action"><a :href="article.link">阅读更多</a></div>
        </li>
    </ul>
</div>

过滤器串连

关于过滤器,我最喜欢的一件事是能够使用管道(|)符号对它们进行串连,并通过一系列过滤器转换一个值。让我们再看一个价格的例子,并让这个价格只保留两位小数,然后加上美元符号。

虽然我们可以使用一个单独的过滤器来实现它,但我们也可能想要使用toUSD过滤器。在这种情况下,分离和串连过滤器是一处方法:

Vue.filter('toFixed', function (price, limit) {
    return price.toFixed(limit)
})

Vue.filter('toUSD', function (price){
    return `$${price}`
})

let app = new Vue({
    el: '#app',
    data () {
        return {
            price: 435.333
        }
    }
})

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

如果你阅读到这里的话,说明你对Vue的过滤器相关的知识也是蛮感兴趣的。这篇文章只是通过几个简单的示例向大家阐述了Vue中怎么定义和使用Vue的过滤器。但他的功能仅仅不像文章中的这么简单,他可以做任何你想做的事情。如果你对Vue其他的自定义过滤器功能感兴趣的话,可以阅读@wy-ei在Github上创建的Vue过滤器集合

总结

我真心希望你能从本文中学到一些东西,现在你知道如何在Vue中创建和使用过滤器。最重要的是,你现在可以重构你的代码并使用过滤器来清理你的代码。

由于作者本身是Vue的初学者,如果文章中有不对之处,还请各路大婶拍正;如果你有更好的经验或相关的建议,欢迎在下面的评论中与我一起分享。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.htmlnike air max 1 style

返回顶部