Vue 2.0的学习笔记：Vue的过滤器
转自： https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html
过滤器的介绍
1、在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式。
2、首先我们要知道，Vue中的过滤器不能替代Vue中的methods、computed或者watch，
3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
4、在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。
5、在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。
6、在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过滤器集合。
