vue的过滤器及计算属性

1，过滤器：让要显示在页面上的内容进行重新筛选
2，过滤器分为全局过滤器和局部过滤器
全局过滤器：

<div id="itany">
       <h1>{{new Date()|time}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.filter('time',function(data){
        return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期  '+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
    })
    new Vue({
        el:'#itany'
    })
</script>      

局部过滤器：

  <div id="itany">
    <h1>{{new Date()|time}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        filters:{
            time:function(data){
                return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
            }
        }
    })
</script>

3，计算属性

在模板中放入太多逻辑会让模板过重且后期难以维护，例：

    <div id="add">
      {{ message.split(' ').reverse().join('===') }}
    </div>

对于任何复杂逻辑，都应当使用计算属性，例：

  <div id="itany">
       <p>{{count}}</p>
  </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            msg:'hello vue'
        },
        computed:{
            count:function(){
                              //split 切割   reverse 翻转  join 拼接
                return this.msg.split(' ').reverse().join('===');
            }
        }
    })
</script>

计算属性应当写在computed里；

4，数组API

（1） String();--------将数组转化为字符串，返回一个字符串形式的数组，不会改变原数组；
（2） join();-----------将数组变为字符串，默认是通过逗号连接，可以通过参数指定连接符号，返回一个连接后的数组，不会改变原数组；
（3） concat();-------连接一个或多个数组，返回一个连接之后的数组，不会改变原数组；
（4） slice();----------从数组截取一段元素组成一个新的数组，返回一个截出的那段元素组成的新数组，不会改变原数组，如果参数只写一个，表示从这个位置开始直到数组结束；
（5） splice();--------splice(起始位置，要删除的元素个数，要添加的元素的值1，值2……)，作用是对数组元素进行增删改操作，
增：splice(找到要添加元素的下标位置，0，要添加元素的值1，值2……)；
删：splice(找到要删除元素的下标位置，要删除的个数)；
改：splice(找到要修改元素的下标位置，要修改的个数，要添加的元素)；
返回值是一个被删除的元素组成的数组，会改变原数组；
（6） reverse();------作用是翻转数组元素，第一个变成最后一个，最后一个变成第一个，返回值是一个翻转后的数组，会改变原数组；
（7） push();---------从数组的后面添加元素，返回一个新数组的长度，会改变原数组，添加新元素后的数组；
（8） pop();-----------删除数组的最后一个元素，返回一个被删除的元素，会改变原数组，添加新元素后的数组；
（9） unshift();-------作用是从数组前添加元素，返回一个新数组的长度。会改变原数组；
（10） shift();--------从前面删除元素，返回的是被删除的元素，会改变原数组