Vue 2.0 由浅入深-过滤器

过滤器

• 用来过滤模型数据，在现实之前进行数据处理和筛选
• 语法{{data | filter(参数) | filter2(参数)}}
• vue2.0中移除了所有内置的过滤器
  可以使用 loadash 第三方工具库

自定义过滤器

• vue允许自定义过滤器
• 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
• vue 过滤器分为全局过滤器和局部过滤器

全局过滤器

定义全局过滤器，需要使用全局API Vue.filter()
Vue.filter('ID',function(){}) 传两个参数 第一个 是 过滤器的 id（过滤器唯一标识） 第二个是一个函数，描述过滤逻辑,函数的第一个参数是 要过滤的值 以后的参数是过滤器参数，函数逻辑处理完 须return出结果

定义过滤器
Vue.filter('ID',function(msg,arg1,arg2){
   return msg+arg1+arg2
}) 

使用过滤器 在双花括号中
{{ msg | ID (arg1,arg2)}}

使用过滤器  在  v-bind中
<div v-bind:id="msg | ID (arg1,arg2) "></div>

例如定义一个可以自定义保留几位小数的过滤器

Vue.filter('toFixed',function(msg,n){
    return msg.toFixed(n) //msg就是要过滤的值   n 就是过滤器的参数这里是保留 n 位小数
})

new Vue({
  el:"#app",
  data:{
    num:1.123456
  }
})

<div id='app'>
  <!--num就是过滤器中的 msg  2就是 过滤器传的参数 n-->
  <p>{{num | toFixed(2)}}</p>
</div>

查看自定义全局过滤器示例

局部过滤器

局部过滤器通过 vue实例 选项 filters 定义 作用仅限于该 vue实例

列如定义一个 文字翻转的过滤器

new Vue({
    el:"#app",
    data:{
        num:""
    },
    filters:{
        'reverse':function(data){
            return data.split('').reverse().join('')
        }
    }
})

使用过滤器

<input type="" v-model="num" name="" id="" value="" />
<p>{{num | reverse}}</p>

效果 输入1234 p标签内返回 4321

查看自定义局部过滤器示例