03vue 过滤器，计算属性

过滤器创建
　　过滤器的本质 是一个有参数 有返回值的方法
　　new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据
　　　　　　}
　　　　}
　　})

全局过滤器
注意事项:

(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算

(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突

(4)用户从input输入的数据在回传到model之前也可以先处理
例:
 <div id='itany'>
       <p>{{2|addZero}}</p>  
   </div>
    <script src='js/vue.js'></script>
    <script>
       Vue.filter('addZero',function(data){
           if(data<10){
               return '0'+data;
           }else{
               return data;
           }
       }) 
       new Vue({
           el:'#itany'
       })
  
    </script>

局部过滤器
上面的例子直接注册在Vue全局上面,其他不用这个过滤器的实例也会被迫接受,
其实过滤器可以注册在实例内部,仅在使用它的实例里面注册

上面的程序改写为:
例:
 <div id='itany'>
       <p>{{123.41233|number}}</p>
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
            el:'#itany',
            filters:{
                number:function(data){
                    return data.toFixed(2)
                }
            }
       })
    </script>

计算属性(...探索中)
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
例1)：
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>
这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。
例2)：
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　
//我们把复杂处理放在了计算属性里面了
</div>
 var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});