vue.js学习（三）
前言
继续前面的学习，上文链接
正文
今天学习vue.js中的过滤器
一.介绍
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。过滤器在指令中由一个管道符 (|) 标记，并可以跟随一个或多个参数。例如使用内置过滤器{PS:（适用于2.0以下版本，2.0以上包括2.0已经废弃内置过滤器，使用时需要自定义过滤器，下面会有提到）。）}capitalize可以将首字母转换成大写：
<body>
<div class="test">
{{message | capitalize}}
div>
body>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "abc"
}
})
script>
// 效果：'abc'=>>'Abc'二.内置过滤器
1.capitalize
功能：首字母大写
2.uppercase
功能：全部大写
3.lowercase
功能：全部小写
4.currency
输出金钱以及小数点,有两个参数，第一个为金钱符号，默认为‘$’,第二个参数为保留小数点位数。
<div id="app">
{{message|currency '￥' '5'}}
div>
//输出:￥12.000005.debounce
功能：在事件中使用，包装处理器，让它延迟执行 x ms， 默认延迟 300ms。
下面示例为：点击按钮之后，按钮在2s后消失，说明事件延迟了2s才执行。
<body>
<div id="app">
<input type="button" id="button" value="点击之后2秒消失" @click="hidden | debounce 2000" />
div>
body>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
methods:{
hidden:function(){
document.getElementById("button").style.display='none';
}
}
})
script>6.limitBy
功能：限制数组中的取值。需在v-for(即数组)里面使用，有两个参数:第一个参数:{Number} 取得数量，第二个参数:{Number} 偏移量
<div id="app">
<ul v-for='arr in arrs | limitBy 3 2'>
<li>{{arr}}li>
ul>
div>
body>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
arrs:['1','2','3','4','5','6']
}
})
script>效果：
7.filter
功能::需在v-for(即数组)里面使用,有三个参数:第一个参数: {String | Function} 需要搜索的字符串，第二个参数: in (可选,指定搜寻位置)，第三个参数: {String} (可选,数组格式)。
<body>
<div class="test">
<ul v-for="item in arr | filterBy 'o' ">
<li>{{item}}li>
ul>
div>
div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
arr: ["hello", "body", "ik", "mo" ,"asq" ,"ko" ,"oven"]
}
})
script>
body>效果：
三.自定义过滤器
方法:定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数。
Vue.filter() Constructor Parameters:
1.filterId: 过滤器ID，用来做为你的过滤器的唯一标识；
2.filter function: 过滤器函数，用一个function来接收一个参数，之后再将接收到的参数格式化为想要的数据结果。
示例：实现首字母大写
<div id="app">
{{message|uppercase}}
div>
body>
<script type="text/javascript">
Vue.filter('uppercase', function(value) {
if (!value) { return ''}
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
var vm = new Vue({
el:'#app',
data: {
message: 'test'
}
})