VUE 過濾器以及外掛
阿新 • • 發佈：2020-07-27
VUE 過濾器以及外掛
過濾器
什麼是過濾器
- 過濾器對將要顯示的文字，先進行特定格式化處理，然後在進行顯示。
- 注意：過濾器並沒有改變原本的資料，只是產生新的對應的資料。
使用方式
定義過濾器
全域性過濾器
Vue.filter( 過濾器名稱 , function(value) ){
// 資料處理邏輯
})
區域性過濾器
在 vue 例項中使用 filter 選項，當前例項範圍可用。
new Vue({
filters : {
過濾器名稱:function ( value ) {
// 資料處理邏輯
}
}
})
使用過濾器
過濾器可以用在兩個地方：雙花括號{{}} 和 v-bind 表示式
<div> {{ 資料屬性名稱 | 過濾器名稱 }} </div>
<div> {{ 資料屬性名稱 | 過濾器名稱 }} </div>
<div v-bind:id=" 資料屬性名稱 | 過濾器名稱 "> </div>
<div v-bind:id=" 資料屬性名稱 | 過濾器名稱( 引數值 ) "> </div>
演示一下
需求
實現過濾敏感字元，如當文字中有 tmd、sb 都進行過濾。
過濾器傳入多個引數，實現求和運算。
實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>過濾器和外掛</title> </head> <body> <div id="app"> <h3>測試過濾器單個引數</h3> <p>{{ content | contentFilter }}</p> <input type="text" :value=" content | contentFilter "> <hr> <h3>測試過濾器多個引數</h3> <p>{{ javaScore | add(vueScore,pythonScore) }}</p> <input type="text" :value="javaScore | add(vueScore,pythonScore)"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> // 全域性過濾器 // Vue.filter('contentFilter', function (value) { // if (!value) { // return '' // } // return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '**') // }) new Vue({ el: '#app', data: { content: '小夥子，你TMD就是個大SB！！！', javaScore: 99, vueScore: 88, pythonScore: 77 }, filters: { // 定義區域性過濾器 contentFilter(value) { if (!value) { return '' } return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '**') }, add(num1, num2, num3) { // num1 其實就是 | 左邊的資料 return num1 + num2 + num3; } } }) </script> </body> </html>