VUE过滤器

过滤器：让要显示在页面上的内容重新筛选。

主要分为全局过滤器和局部过滤器。
全局过滤器如下：

       <div id="itany">
            <p>{{8|addZero}}</p>
        </div>
        <script src="js/vue.js"></script>
        <script type="text/javascript">
            Vue.filter('addZero',function(data){
                if(data<10){
                    return '0'+data;
                }else{
                    return data;
                }
            })
                new Vue({
                el:'#itany'
            })
        </script>

局部过滤器如下：

       <div id="itany">
            <p>{{123.456|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">
            <p>{{new Date|dat}}</p>
        </div>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#itany',
                filters:{
                    dat:function(data){
                        return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'号'
+','+'星期'+data.getDay()+','+data.getHours()+'时'+data.getMinutes()+'分'+data.getSeconds()+'秒'
                    }
                }
            })
        </script>

计算属性：

      <div id="itany">
          <h1>{{count}}</h1>
      </div>
      <script src="js/vue.js"></script>
      <script type="text/javascript">
          new Vue({
              el:'#itany',
              data:{
                  mes:'hello vue'
              },
              computed:{
                  count:function(){
                      return this.mes.split(' ').reverse().join('===')
                  }
              }
          })
      </script>

计算总价练习:

      <div id="itany">
           <button v-on:click="add">加货</button>
           <h1>现总价为:{{counts}}</h1>
       </div>
       
       
       <script src="js/vue.js"></script>
       <script>
           new Vue({
               el:'#itany',
               data:{
                   arr1:{pice:2,count:3},
                   arr2:{pice:4,count:6},
                   arr3:{}
               },
               computed:{
                   counts:function(data){
                       return this.arr1.pice*this.arr1.count+this.arr2.pice*this.arr2.count
                   }
               },
               methods:{
                   add:function(){
                       this.arr1.count++;
                   }
                   
               }
           })
       </script>

数组API：
splice（）；把数组转换为字符串。
join（）；拼接，最后拼接为字符串。
concat（）；拼接，结果为拼接。
slice（）；截取，含头不含尾。
splice（）；删除，插入，替换。
reverse（）；翻转。
push（）；给数组末尾添加元素。
pop（）；删除数组末尾元素。
unshift（）；给数组开头添加元素。
shift（）；删除数组开头元素。