過濾器主要分為全局過濾器和局部過濾器。

全局過濾器如下：

<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>

局部過濾器如下：

<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>

計算屬性如下：

<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:{
               count:function(){
                   return this.msg.split(' ').reverse().join('===')
               }
           }
       })
    </script>

過濾器中獲取日期：

<div id="itany">
            <p>{{new data|dat}}</p>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            new Vue({
                el:'itany',
                filters{
                    dat:function(data){
                        return date.getFullYear()
                    }
                }
            })
        </script>

計算屬性練習(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.package2.count++;
               }
           }
           
       })
    </script>

多個數(shù)組API意義：
splice（）；把數(shù)組轉(zhuǎn)換為字符串。
join（）；拼接，最后拼接為字符串。
concat（）；拼接，結(jié)果為拼接。
slice（）；截取，含頭不含尾。
splice（）；刪除，插入，替換。
reverse（）；翻轉(zhuǎn)。
push（）；給數(shù)組末尾添加元素。
pop（）；刪除數(shù)組末尾元素。
unshift（）；給數(shù)組開頭添加元素。
shift（）；刪除數(shù)組開頭元素。