vue中使用TypeScript的方法
阿新 • • 發佈:2021-08-12
一、什麼是過濾器?
過濾器是對即將顯示的資料做進一步的篩選處理,然後進行顯示,值得注意的是過濾器並沒有改變原來的資料,只是在原資料的基礎上產生新的資料。
二、如何使用過濾器
<!-- 在雙花括號中 --> <div>{{資料屬性名稱 | 過濾器名稱}}</div> <div>{{資料屬性名稱 | 過濾器名稱(引數值)}}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="資料屬性名稱 | 過濾器名稱"></div> <div v-bind:id="資料屬性名稱 | 過濾器名稱(引數值)"></div>
三、vue 過濾器分類
過濾器分為兩種,一種是區域性過濾器,一種全域性過濾器。所有的過濾器都是函式,並且引數為要過濾的資料。
區域性過濾器:只允許在當前元件中使用
全域性過濾器:所有元件都可以使用
1) 區域性過濾器
語法:
new Vue({ filters: { '過濾器名稱': function (value1[,value2,...] ) { // 邏輯程式碼 } } })
實列:
// 建立 Vue 例項,得到 ViewModel var vm = newVue({ el: '#app', data: { msg: '曾經,我也是一個單純的少年,單純的我,傻傻的問,誰是世界上最單純的男人' }, methods: {}, //定義私用區域性過濾器。只能在當前 vue 物件中使用 filters: { dataFormat(msg) {return msg+'xxxxx'; } } });
2) 全域性過濾器
語法:
Vue.filter('過濾器名稱', function (value1[,value2,...] ) { //邏輯程式碼 })
例項:
<div id="app"> <p>{{ msg | msgFormat('瘋狂','--')}}</p> </div> <script> // 定義一個 Vue 全域性的過濾器,名字叫做 msgFormat Vue.filter('msgFormat', function(msg, arg, arg2) { // 字串的 replace 方法,第一個引數,除了可寫一個 字串之外,還可以定義一個正則 return msg.replace(/單純/g, arg+arg2) }) </script>
注意:
1, 當有區域性和全域性兩個名稱相同的過濾器時候,會以就近原則進行呼叫,即:區域性過濾器優先於全域性過濾器被呼叫!
2, 一個表示式可以使用多個過濾器。過濾器之間需要用管道符“|”隔開。其執行順序從左往右
3,過濾器並不是只可以使用一個,一個數據可以用多個過濾器,從左向右執行,注意的下一個過濾器接收的是上一個過濾器的處理結果,因此千萬要注意使用順序
以上內容為個人學習總結,歡迎批評指正~~