过滤器、数组API总结和计算属性

过滤器：让要显示在页面上的内容进行重新筛选 分为俩部分js和html

过滤器可分为全局过滤器和局部过滤器

全局过滤器：

··js
vue filter("过滤器的名字"，function(){
      
})

··html:
{{msg|过滤器的名字}}

局部过滤器

``js
new Vue({
    filters:{
        过滤器名：function(){
        }
   }
})

例子：若代码中为8浏览器中显示为08;若代码中为18浏览器中显示18

<div class="box">
        <p>{{9|add}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.filter("add",function(data){
            if(data<10){
                return "0"+data
            }else{
                return data
            }
        })
        new Vue({
            el:".box"
        })
    </script>

<div class="box">
        <p>{{9|add}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box"
            filters:{
              add:function(data){
                   if(data<10){
                     return "0"+data
                  }else{
                     return data
                 } 
                }
            }
        })
    </script>

表盘：(俩种方法写在一起)

<div class="box">
        {{new Date()|number}}
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.filter("number",function(data){
            var year=data.getFullYear();
            var month=data.getMonth()+1;
            var ri=data.getDate();
            var day=data.getDay();
            var hours=data.getHours();
            var minutes=data.getMinutes();
            var seconds=data.getSeconds();
            return data.innerHTML="现在时间是"+year+"年"+month+"月"+ri+"日,星期"+day+","+hours+"点"+minutes+"分"+seconds+"秒";
        })
        new Vue({
            el:".box",
            /*filters:{
                number:function(data){
                    var year=data.getFullYear();
                    var month=data.getMonth()+1;
                    var ri=data.getDate();
                    var day=data.getDay();
                    var hours=data.getHours();
                    var minutes=data.getMinutes();
                    var seconds=data.getSeconds();
                    return data.innerHTML="现在时间是"+year+"年"+month+"月"+ri+"日，星期"+day+","+hours+"点"+minutes+"分"+seconds+"秒";
                }
            }*/
            filters:{
                number:function(data){
                    return data.getFullYear()+"年"+data.getMonth()+"月"+ri+"日,星期"+data.getDay()+","+data.getHours()+"点"+data.setMinutes()+"分"+data.getSeconds()+"秒"；
                }
            }
        })
    </script>

---

数组API总结

push():向数组末尾添加一个或多个元素

unshift(): 向数组的开头添加一个或多个元素

pop(): 删除数组最后一个元素

shift(): 删除数组第一个元素

sort(): 给数组排序

reverse(): 颠倒数组项在数组中的位置

concat(): 合并数组

slice(): 指定的位置开始删除指定的数组项，并且将删除的数组项构建成一个新数组;可以接受一个或两个参数，要返回项的起始和结束位置，返回所截取数组的项，但是不包括结束位置的项，不会改变原数组

splice():主要用法是向数组的中部插入项，会改变原数组，是最强大的数组方法。最多指定3个参数。 对一个数组做删除、插入和替换

indexOf(): 从前向后查找元素在数组中位置

lastIndexOf(): 从后向前查找元素在数组中位置

forEach()、every()、some()、filter()和map()：数组迭代

(1)every():对数组的每一项运行给定函数，如果数组的每一项都返回true，则返回true。对数组应用该方法，有返回值为true或false
(2)some():对数组的每一项运行给定函数，如果数组的任一项都返回true，则返回true。对数组应用该方法，有返回值为true或false
(3)filter():对数组的每一项运行给定函数，返回该函数中会返回true的项组成的数组。有返回值，为符合条件的项组成的数组
(4)map()::对数组的每一项运行给定函数,有返回每次函数调用的结果组成的数组。
(5)forEach():对数组的每一项运行给定函数,这个方法没有返回值。本质上与使用for循环迭代数组是一样的

reduce(): 数组中的每个值（从左到右）开始合并，最终为一个值

reduceRight(): 数组中的每个值（从右到左）开始合并，最终为一个值

String():把对象的值转换为字符串

join():把数组的所有元素放入一个字符串元素通过指定分隔符分隔

计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

``html
<div class="box">
     <p>{{msg.split(" ").reverse().join("===")}}</p>
</div>
``js
<script src="js/vue.js"></script>
<script>
     new Vue({
        el:".box",
        data:{
          msg:"hello vue"
        }
      })
</script>

这样写页面复杂不清晰占内存 不便于后期的维护可改为：

<div class="box">
        <p>{{msg}}</p>
        <h5>{{add}}</h5>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:".box",
            data:{
                msg:"hello vue"
            },
            computed:{
                add:function(){
                   return this.msg.split(" ").reverse().join("===")
                }
            }
        })
    </script>

利用计算属性求和

<div class="box">
       <button v-on:click="add">点击</button>
        <p>总价：{{push}}元</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el:".box",
           data:{
               package1:{price:2,count:3},
               package2:{price:4,count:6}
           },
            methods:{
                add:function(){
                   this.package1.count++
                }
            },
            computed:{
                push:function(){
                    return this.package1.price*this.package1.count+this.package2.price*this.package2.count
                }
            }
        })
    </script>