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

转自： https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html 

过滤器的介绍

一、在Vue中使用过滤器（Filters）来渲染数据是一种颇有趣的方式。

二、首先咱们要知道，Vue中的过滤器不能替代Vue中的methods、computed或者watch，

三、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。

四、在不少不一样的状况下，过滤器都是有用的，好比尽量保持API响应的干净，并在前端处理数据的格式。

五、在你但愿避免重复和链接的状况下，它们也能够有效地封装成可重用代码块背后的全部逻辑。

六、在Vue 2.0中已经没有内置的过滤器了，咱们能够自定义过滤器。2.0以前有。在这里有一个旧的内置过滤器的完整列表

定义和使用过滤器

1.全局和本地过滤器：你能够跨全部组件访问全局过滤器，而本地过滤器只容许你在其定义的组件内部使用

全局过滤器

全局过滤器

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

// 声明一个全局的过滤器 
Vue.filter('toUSD', function (value) { 
　　return `$${value}` 
}) 
// 在模板中这样使用 文本插值的使用方式 
<div id="app"> 
    <h1>{{ price | toUSD}}</h1>
 </div>

　　注意：过滤器定义必须始终位于Vue实例之上，不然你将会获得一个“Failed to resolve filter: toUSD”的错误信息。

 

本过过滤器

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

本地过滤器存储在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() 
　　　 }
　　} 
}) 
<div id="app"> <h1>{{ name | Upper }}</h1> </div>

　

添加参数

正如前面提到过的，过滤器能够根据你须要添加一些参数进来。咱们来看一个示例。好比说，咱们建立博客的时候，都会有文章列表，每篇博客将会有一个文章摘要，而后提供一个“阅读更多”的功能。咱们这个示例就是来建立一个名为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是什么鬼。' 
　　　　　　　　link: '//www.w3cplus.com/css/focus-within.html' 
　　　　　　　　},
 　　　　　　　{
　　　　　　　　title: '如何改变表单控件光标颜色', 
　　　　   　　summary: '表单你们应该不陌生，固然了，今天并非来聊怎么作表单或者处理表单的样式网格。而是来聊聊怎么改变表单控件中光标的颜色。不知道在你们心中，表单控件的光标颜色是根据color属性来控制的。', 
　　　　   　　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其余的自定义过滤器功能感兴趣的话，能够阅读@wy-ei在Github上建立的Vue过滤器集合。