一 过滤器 对页面上的数据进行筛选和过滤

  全局过滤器
        html
      <p>{{num|过滤器的名字}}</p>
      js
       Vue.filter('过滤器的名字',function(){})

   局部过滤器
      new Vue({
          el:'#itany',
          data:{},
          methods:{},
          filters:{
             过滤器的名字：function(){}
          }
      })


例一：
     <div id='app'>
      <h1>{{num|addZero}}</h1>
  </div>
   <script src='js/vue.js'></script> 
   <script>
       new Vue({
           el:'#app',
           data:{
               num: Math.floor(Math.random()*(20-0+1)+0)
           },
           filters:{
               addZero:function(data){
               if(data<10){
                  return '0'+data;
               }else{
                   return data;
               }
         }
           }
       })

    </script>

二 计算属性

例一：
<div id='app'>
<a href="">{{revMsg}}</a>

           <h1>{{msg.split(' ').reverse().join('*****')}}</h1>
   
           <!--vue===hello-->
       </div>
        <script src='js/vue.js'></script>
        <script>

           new Vue({
               el:'#app',
               data:{
                   msg:'hello vue'
               },
               methods:{},
               filters:{},
               computed:{
                   revMsg:function(){
                       return this.msg.split(' ').reverse().join('&&&&&&&')
                   }
               }
           })
        </script>

 <div id='app'>
      <button @click='add'>加货</button>
       <h1>{{total}}</h1>
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               pack1:{price:5,count:3},
               pack2:{price:4,count:6}
           },
           computed:{
               otal:function(){
                 return this.pack1.price*this.pack1.count+this.pack2.price*this.pack2.count
               }
           },
             methods:{
               add:function(){
                   this.pack1.count++;
               }
           }
       })
    </script>