過濾器：讓要顯示在頁(yè)面上的內(nèi)容進(jìn)行重新篩選 分為倆部分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="現(xiàn)在時(shí)間是"+year+"年"+month+"月"+ri+"日,星期"+day+","+hours+"點(diǎn)"+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="現(xiàn)在時(shí)間是"+year+"年"+month+"月"+ri+"日，星期"+day+","+hours+"點(diǎn)"+minutes+"分"+seconds+"秒";
                }
            }*/
            filters:{
                number:function(data){
                    return data.getFullYear()+"年"+data.getMonth()+"月"+ri+"日,星期"+data.getDay()+","+data.getHours()+"點(diǎn)"+data.setMinutes()+"分"+data.getSeconds()+"秒"；
                }
            }
        })
    </script>

數(shù)組API總結(jié)

push():向數(shù)組末尾添加一個(gè)或多個(gè)元素

unshift(): 向數(shù)組的開頭添加一個(gè)或多個(gè)元素

pop(): 刪除數(shù)組最后一個(gè)元素

shift(): 刪除數(shù)組第一個(gè)元素

sort(): 給數(shù)組排序

reverse(): 顛倒數(shù)組項(xiàng)在數(shù)組中的位置

concat(): 合并數(shù)組

slice(): 指定的位置開始刪除指定的數(shù)組項(xiàng)，并且將刪除的數(shù)組項(xiàng)構(gòu)建成一個(gè)新數(shù)組;可以接受一個(gè)或兩個(gè)參數(shù)，要返回項(xiàng)的起始和結(jié)束位置，返回所截取數(shù)組的項(xiàng)，但是不包括結(jié)束位置的項(xiàng)，不會(huì)改變?cè)瓟?shù)組

splice():主要用法是向數(shù)組的中部插入項(xiàng)，會(huì)改變?cè)瓟?shù)組，是最強(qiáng)大的數(shù)組方法。最多指定3個(gè)參數(shù)。 對(duì)一個(gè)數(shù)組做刪除、插入和替換

indexOf(): 從前向后查找元素在數(shù)組中位置

lastIndexOf(): 從后向前查找元素在數(shù)組中位置

forEach()、every()、some()、filter()和map()：數(shù)組迭代

(1)every():對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)，如果數(shù)組的每一項(xiàng)都返回true，則返回true。對(duì)數(shù)組應(yīng)用該方法，有返回值為true或false
(2)some():對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)，如果數(shù)組的任一項(xiàng)都返回true，則返回true。對(duì)數(shù)組應(yīng)用該方法，有返回值為true或false
(3)filter():對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)，返回該函數(shù)中會(huì)返回true的項(xiàng)組成的數(shù)組。有返回值，為符合條件的項(xiàng)組成的數(shù)組
(4)map()::對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù),有返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
(5)forEach():對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù),這個(gè)方法沒有返回值。本質(zhì)上與使用for循環(huán)迭代數(shù)組是一樣的

reduce(): 數(shù)組中的每個(gè)值（從左到右）開始合并，最終為一個(gè)值

reduceRight(): 數(shù)組中的每個(gè)值（從右到左）開始合并，最終為一個(gè)值

String():把對(duì)象的值轉(zhuǎn)換為字符串

join():把數(shù)組的所有元素放入一個(gè)字符串元素通過指定分隔符分隔

計(jì)算屬性

計(jì)算屬性關(guān)鍵詞: computed。

計(jì)算屬性在處理一些復(fù)雜邏輯時(shí)是很有用的。

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

這樣寫頁(yè)面復(fù)雜不清晰占內(nèi)存 不便于后期的維護(hù)可改為：

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

利用計(jì)算屬性求和

<div class="box">
       <button v-on:click="add">點(diǎn)擊</button>
        <p>總價(jià)：{{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>