VUE过滤器和计算属性

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

全局过滤器如下：

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

计算属性练习实例：

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

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