本章節會提及Vue中配置的過濾器使用方式
其配置項為 filters:
配置所需要的函示針對需要的數據作過濾
在編譯完成後會將針對的數據做設計完後的調整
通常使用時機為 → 對數據格式化 （ex : 數字, 日期）
程式碼：
<body>
<div id="root">
<h2>{{number | demo}}</h2>
<h2>{{number | demo(777)}}</h2>
</div>
<script>
var vm =new Vue({
el : '#root',
data : {
number : 123456,
},
filters : {
demo(val1, val2){
if (val2 != undefined) {
return val1 - val2;
} else {
return val1;
}
}
},
})
</script>
</body>
這是一個簡易的範例
在 filter中可以寫入函數配置
可以接受多個參數
第一個參數及是欲過濾的數據
而後續的參數就會依過濾器的寫法做使用
在上述的範例中, 其過濾器的寫法是局部的使用
依照Vue組件化的概念
少不了需要一個共用的過濾器供給多個組件做使用
這時候就可以用Vue相關的函數做使用
Vue.filter(name , function(){})
在使用上只需要配置兩個參數
第一個即是此設計的過濾器名稱, 後續就是要設計的函數
相對於在實例中配置一個過濾器, 此方法可以達到的效果更廣
在某些情況上
一筆資料的過濾可能不只一次,而且是不同的過濾函數
這在Vue中也是可以達到的
EX : {{data | filter1 | filter2 ...}}
使用上不太複雜, 要注意的是其先後順序
在過濾的順序由左至右
後面過濾器過濾的數據都是前一個過濾器過濾後的value
依照放入順序的不同,會有不同的結果
以上是過濾器的介紹
下篇章節中會介紹,在Vue中相對不常用的指令
iThome鐵人賽
看影片追技術