1.過濾器

過濾器是讓要顯示在頁面上的內(nèi)容進(jìn)行重新篩選
把要顯示在頁面上的數(shù)據(jù)進(jìn)行篩選或重新操作，分為全局過濾和局部過濾

1.）全局過濾器

Vue.filter('過濾器的名字'，function(){
})

html
<p>{{msg|過濾器的名字}}</p>
new Vue({
})

2.)局部過濾器

new Vue({
    el:''
    data:{}
    methods:{},
    filters:{
       過濾器名：function（data）{
    
        }
})

練習(xí)

保留兩位小數(shù)練習(xí)

<div id='itany'>
       <p>{{123.41233|number}}</p>
</div>
<script src='js/vue.js'></script>
<script>
//       Vue.filter("number",function(data){
//           return data.toFixed(2)
//       }) 
   new Vue({
        el:'#itany',
        filters:{
            number:function(data){
                return data.toFixed(2)
            }
        }
   })
</script>

時(shí)間過濾練習(xí)

<div id='itany'>
    <p>{{new Date()|date}}</p>
</div>
<script src='js/vue.js'></script> 
<script>
     Vue.filter("date",function(data){
         return  data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'點(diǎn)'+data.getMinutes()+'分'+data.getSeconds()+'秒';
 })  
 new Vue({
     el:'#itany'  
 })
</script>

2.計(jì)算屬性

練習(xí)

計(jì)算屬性練習(xí)

<div id='itany'>
     <h1>{{msg.split(' ').reverse().join('===')}}</h1>
     <a href="#">{{count}}</a>
 </div>
<script src='js/vue.js'></script>
<script>

   new Vue({
       el:'#itany',
       data:{
           msg:'hello vue'
       },
       computed:{//計(jì)算屬性
           count:function(){   //切割 split  置換reverse   拼接符join 
               return this.msg.split(' ').reverse().join('===')
           }
       }
   })
</script>

計(jì)算屬性加貨練習(xí)

<div id='itany'>
     <button @click='add'>加貨</button>
  <h1>{{total}}</h1>
</div>
<script src='js/vue.js'></script> 
<script>
   new Vue({
       el:'#itany',
       data:{
           package1:{price:2,count:3},
           package2:{price:4,count:6}
       },
       computed:{
           total:function(){
               return this.package1.price*this.package1.count+this.package2.price*this.package2.count
           }
       },
       methods:{
           add:function(){
               this.package1.count++;
           }
       }
       
   })
</script>