Vue2.0自定義過濾器

先了解一下什么是vue過濾器
Vue在1.0中有許許多多的各種功能的過濾器↓

先創建一個實例里面寫上一些數據稍后使用
var vm=new Vue({
        el:'#app',
        data:{
            order:1,
            name:"zy",
            wd:"hello",
            count:0,
            price:19999.1234,
            list:["1","2","3","4","5","6","7","8"],
            items:["Tom","Jack","jzx","pzx","yl","zmh","tc","csl","zy","ym","zw","zsy","lx"],
            arr:[{a:1,b:"a"},{a:10,b:"b"},{a:3,b:"c"}]
        },
        methods:{
            up(){
                console.log(1)
            }
        }
    })

		DOM 結構中↓
    ----------------------
     幾個1.0中自帶的過濾器例子
     
    <div id="app" style="font-size: 50px">
    首字母變成大寫:{{wd|capitalize}} <br>
    全部轉換成大寫:{{wd|uppercase}}      <br>
    全部轉換成小寫:{{'WORD'|lowercase}}      <br>
    貨幣過濾器:{{price|currency "£" 2}}     <br>
    延遲事件執行的時間
    <input type="text" @keyup="up|debounce 2000"> <br>
    limitBy 循環數組的時候顯示幾條數據,從那條(索引)開始顯示
    <input type="button" @click="count+=2" value="下一頁">
    <p v-for="item in list|limitBy 2 count">{{item}}</p>
    filterBy在所有的數據中過濾
    <input type="text" v-model="name">
    <p v-for="item in items | filterBy name">
        {{item}}
    </p>
    orderBy >=0從小到大  <0 從大到小
    <button @click="order*=-1">排序</button>
    <div v-for="item in arr | orderBy 'a' order">{{item.a}},{{item.b}}</div>

OK~通過上面的幾個小例子知道可以通過過濾器來過濾並簡單的處理數據但是在Vue2.0中把所有的過濾器都去掉了都要自己寫沒錯就是要用原生來自定義自己需要的過濾器了

---

[正題]

自定義過濾器

給vue增加自定義過濾器,[Vue.filter()]這是給Vue這個大類里面增加過濾器所以一定要寫在所有Vue實例前面不然不生效
例子中實現一個過濾當前完整時間的過濾器

{{new Date | filterDate}}
{{Date.now()|filterDate}}
-----------------------
 //給Vue上加自定義過濾器
 第一個參數:過濾器名字,第二參數是回調里面傳一個參數就是要過濾的內容
    Vue.filter("filterDate",function (value) {
        //value 就是要過濾的內容
        //根據傳進來的參數變成真實的時間
        上面我們分別傳了一個
        var time=new Date(value);
        //console.log(time);
        //return "2017-6-29 12:42:00"
        return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`
    });

Vue中不但可以自定義一些自定
    var vm=new Vue({
        a:"a",
        b:"b",
        el:'#app',
        data:{},
    });
    //自定義屬性通過$options來獲取
    console.log(vm.$options);
    假如單獨調用屬性a的話就是
    vm.$options.a