过滤器

作用：让要显示在页面上的内容进行重新筛选

类型：全局过滤器      局部过滤器

格式：

全局过滤器：

html部分

<p>{{msg|过滤器的名字}}</p>

js部分

Vue.filter('过滤器的名字'，function(){

})
new Vue({
})

局部过滤器：

html部分

<p>{{msg|过滤器的名字}}</p>

js部分

})
    new Vue({
        el:'',
        data:{},
        methods:{},
        filters:{
            过滤器名：function (data){
                
            }   
        }
    })

例子1：为小于10的数字前面加0（全局过滤器）

<div id='itany'>
    <p>{{2|addZero}}</p>
</div>
<script>
   Vue.filter('addZero',function(data){
       if(data<10){
           return '0'+data;
       }else{
           return data;
       }
   }) 
   new Vue({
       el:'#itany'
   })
</script>

例子2：现在时间（全局过滤器/局部过滤器）

全局过滤器：

<div id="itany">
    <p>现在时间是{{new Date()|nian}}</p>
</div>
<script>
    new Vue({
        el:'#itany',
        filters:{
            nian:function(data){
                return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
            }
        }
    })
</script>

局部过滤器：

<div id="itany">
    <p>现在时间是{{new Date()|nian}}</p>
</div>
<script>
    Vue.filter("nian",function(data){
        return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
    })
    new Vue({
        el:'#itany'
    })
</script>

计算属性

处理复杂的逻辑操作

练习：

<div id='itany'>
    <h1>{{msg.split(' ').reverse().join('===')}}</h1>
    <a href="#">{{count}}</a>
</div>
<script>
   new Vue({
       el:'#itany',
       data:{
           msg:'hello vue'
       },
       computed:{//计算属性
           count:function(){
               return this.msg.split(' ').reverse().join('===')
           }
       }
   })
</script>

例子：加货计算

<div id="itany">
   <button @click='add'>加货</button>
   <p>总价:￥{{sum}}</p>
</div>
<script>
    new Vue({
        el:'#itany',
        data:{
           package1:{price:2,count:3},
           package2:{price:4,count:6}
        },
        computed:{
        sum:function(){
            return this.package1.price*this.package1.count+this.package2.price*this.package2.count
            }
        },
        methods:{
           add:function(){
               this.package1.count++;
           }
       }
    })
</script>