過濾器作用:
在不改變數據的情況下，輸出前端需要的格式數據
過濾器的定義：
Vue.filter("過濾器名稱",("過濾內容")=>{
過濾內容的處理
return 過濾後內容;
})
過濾器的使用
<p>{{數據|過濾器名稱}}</p>
Filter過濾器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過濾器</title>
</head>
<body>
<div id="app">
<h1>{{str|test}}</h1>
</div>
<script src="vue.js"></script>
<script>
Vue.filter("test",function (val) {
var next = val.split("").reverse().join("");
return next;
})
Vue.filter("tee",function (val) {
var a = val.split("").reverse().splice(2,3).join("");
return "昨天"+a;
})
let vu = new Vue({
el:"#app",
data:{
str:"今天天氣好",
},
filters:{
test:function(val){
return val.split("").reverse().join("");
}
}
})
</script>
</body>
</html>
注意 ：在沒有衝突的情況下fileter過濾器可以串聯 過濾器要在創建實例vue之前創建 但是：filters可以寫在Vue實例內位置不限
用途 ：在不改變原始數據的情況下 讓頁面顯示想要的處理後的數據