前言
Vue 允許我們在專案中定義過濾器對我們頁面的文字展示進行格式的控制，本文就來總結一下過濾器在專案中的常見使用方法。
正文
1.區域性過濾器的註冊
（1）無參區域性過濾器
<div id="app">
<!-- 元件內部的過濾器 -->
<filter-item :msg="toMsg"></filter-item>
</div>
<script>
// 元件內部註冊過濾器
Vue.component("filter-item", {
data() {
return {
}
},
props: ['msg'],
filters: {
toFixed(value) {
if (!value) {
return
}
return value.toFixed(2)
},
},
template: "<div>{{msg|toFixed}}</div>"
})
new Vue({
el: "#app",
data() {
return {
toMsg: 123,
}
},
})
</script>
執行結果如下：
上面的程式碼中在子元件內部定義一個過濾器，在其模板中的插值表示式中使用，完成了對字串的格式化。
（2）帶參區域性過濾器
<div id="app">
<!-- 元件內部的過濾器 -->
<filter-item :msg="toMsg"></filter-item>
</div>
<script>
// 元件內部註冊過濾器
Vue.component("filter-item", {
data() {
return {
}
},
props: ['msg'],
filters: {
toString(value,arg){
if (!value) {
return
}
console.log("value",value);
return value.toString(arg)
}
},
template: "<div>{{msg|toString(2)}}</div>"
})
// 全域性註冊過濾器
new Vue({
el: "#app",
data() {
return {
toMsg: 123,
}
},
})
</script>
執行結果如下：
上面的程式碼中在元件內部定義一個過濾器，接受兩個引數，第一個引數是需要格式化的文字，第二個是需要進行的進位制轉化。
2.全域性過濾器的註冊
（1）無參全域性過濾器
<div id="app">
<!-- 全域性的過濾器 -->
{{myMsg|toUpper}}
</div>
<script>
// 全域性註冊過濾器
new Vue({
el: "#app",
data() {
return {
myMsg: "abcdef"
}
},
filters: {
toUpper(value) {
if (!value) {
return
}
return value.toUpperCase()
},
},
methods: {
}
})
</script>
執行結果如下：
上面的程式碼中在vue根元件中定義一個過濾器，該過濾器為全域性過濾器，同樣通過插值表示式完成格式轉化。
（2）帶參全域性過濾器
<div id="app">
<!-- 傳遞引數的過濾器 -->
{{myMsg|toSlice(3)}}
</div>
<script>
// 全域性註冊過濾器
new Vue({
el: "#app",
data() {
return {
toMsg: 123,
myMsg: "abcdef"
}
},
filters: {
// 傳參的過濾器
toSlice(value,arg){
if (!value) {
return
}
return value.slice(arg)
}
},
})
</script>
執行結果如下：
上面的程式碼中在vue根元件中定義一個全域性過濾器，該過濾器接收兩個引數，第一個引數為需要格式化的文字，第二個為真正的引數。
注意：當局不和全域性有兩個名稱相同的過濾器的時候，會首先使用區域性過濾器，這裡採用就近原則，區域性過濾器會優先於全域性過濾器的呼叫。
3.過濾器的使用
在插值表示式中使用帶個過濾器如上文，如果需要組合使用多個過濾器的時候，需要用 "|"分隔符隔開。使用如下：
<div id="app">
<!-- 串聯的過濾器 -->
{{myMsg|toUpper|toReverse}}
</div>
<script>
// 全域性註冊過濾器
new Vue({
el: "#app",
data() {
return {
toMsg: 123,
myMsg: "abcdef"
}
},
filters: {
toUpper(value) {
if (!value) {
return
}
return value.toUpperCase()
},
toReverse(value) {
if (!value) {
return
}
return value.split("").reverse().join("")
},
}
})
</script>
執行結果如下：
上面的程式碼使用了串聯的過濾器，首先通過toUpper過濾器對文字進行大寫轉化，然後toReverse過濾器對文字進行反轉轉化，最終得到結果。
寫在最後
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。
