iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

菜鳥學前端,一起vue起來 !系列 第 27

Day 27. 過濾器 - Filter

今天是三天連假的第一天,實體上課真的太累了,一不小心睡到下午诶嘿(๑´ڡ`๑)連假過完鐵人也差不多完成了!時間真的過的飛快啊,今天來講講vue的過濾器,雖然在這邊出現順序有點混亂,但沒關係的對吧o(`ω´ )o

Filters 過濾器

Vue的過濾器主要用來格式化數據、文字等資料,像是轉換日期顯示方法、千分號:$1,000、英文大小寫轉換等狀況。

Filters寫法

規則:

Vue.filter(dataName, filterFunction){
     // 過濾器處理過程
})

dataName是過濾器的名稱,用|(pipe)分隔,filterFunction是過濾器的函式名稱
主要的寫法分為兩種:

  • 插值表達寫法 {{ dataName | filterFunction }}
  • v-bind寫法 <div v-bind:id="dataName | filterFunction"></div>

特性

  • 可以使用|(pipe)串聯多個不同的filter(數量不限)
  • 由左到右執行(順序將影響結果) EX: {{ price | filterComma | filterDollarSign }}
  • 註冊方式:分為區域註冊、全域註冊

Local filters 本地/區域過濾器

我們可以在一個組件的option中定義本地的過濾器(Local filters的範圍僅在Vue Instance 中)。
這個例子我們在數字前面加上錢錢$符號:

<div id="app">
    <p>{{ price | filterDollarSign }}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            price:123456
        },
        filters: {
            filterDollarSign(price) {
                return '$' + price;
            }
        }
    });
</script>

https://ithelp.ithome.com.tw/upload/images/20211009/20131400ENK58Xku1c.png

Global filters全域過濾器

全局過濾器要在創建Vue instance前先定義好,當全域過濾器和區域過濾器名字重複時,會採用局部過濾器歐!
這個例子我們讓名字的字首變成大寫:

<div id="app">
    name:<input type="text" v-model="name" />
    <div>{{name | upper}}</div>
</div>

<script>
    // 定義過濾器
    Vue.filter('upper', function (val) {
        return val.charAt(0).toUpperCase()+val.slice(1);
    })
    var vm = new Vue({
        el: '#app',
        data: {
            name: ''
        },
    });
</script>

https://ithelp.ithome.com.tw/upload/images/20211009/20131400JdVVsW6CI9.png

串聯多個Filters

用第一個例子來示範,串聯多個filters的時候執行順序是由左到右歐!
我們用filterComma來將數字變成千分位,加上逗點;用filterDollarSign在數字前加上錢錢$符號。

<div id="app">
    <p>{{ price | filterComma | filterDollarSign }}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            price:123456
        },
        filters: {
            filterDollarSign(price) {
                return '$' + price;
            },
            filterComma(price) {
                return price.toLocaleString('en-US');
            }
        }
    });
</script>

https://ithelp.ithome.com.tw/upload/images/20211009/20131400WqKf8tgPsi.png

參考資料:
[Vue學習筆記](七)計算屬性、監聽器、過濾器 — computed, watch,filter
用範例理解 Vue.js #7:Filters vs Computed
Vue過濾器


上一篇
Day 26. 雙向綁定語法糖 - v-model
下一篇
Day 28. 組件基礎 - Components
系列文
菜鳥學前端,一起vue起來 !30

尚未有邦友留言

立即登入留言