2018-09-19 vue 5

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

   全局过滤器
      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>
//       Vue.filter('addZero',function(data){
//           if(data<10){
//              return '0'+data;
//           }else{
//               return data;
//           }
//       })
       new Vue({
           el:'#app',
           data:{
//               num: Math.floor(Math.random()*(max-min+1)+min)
               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'>
       <p>{{123.456|number}}</p>
   </div>
    <script src='js/vue.js'></script>
    <script>
      Vue.filter('number',function(data){
          return data.toFixed(2)
      })
      new Vue({
          el:'#app'
      })
    </script>

例三：
   <div id='app'>
       <h1>{{new Date()|date}}</h1>
   </div>
    <script src='js/vue.js'></script>
    <script>
        Vue.filter('date',function(date){
            return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+"日,星期"+date.getDay()+date.getHours()+'点'+date.getMinutes()+'分'+date.getSeconds()+'秒'
        })
        new Vue({
            el:'#app'
        })
    </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:{
               total:function(){
                 return this.pack1.price*this.pack1.count+this.pack2.price*this.pack2.count
               }
           },
           methods:{
               add:function(){
                   this.pack1.count++;
               }
           }
       })
    </script>