亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

此間少年_ · 更新于 2020-12-04

1. 前言

本小節我們將學習如何使用過濾器。包括如何注冊過濾器、過濾器的使用、過濾器的串聯、過濾器的傳參。過濾器的使用非常簡單，同學們只需要多寫幾個例子就可以完全掌握。

2. 慕課解釋

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。 — 官方定義

過濾器是對即將顯示的數據做進一步的篩選處理，然后進行顯示，值得注意的是過濾器并沒有改變原來的數據，只是在原數據的基礎上產生新的數據。過濾器在日常開發中也會大量使用，例如：枚舉值的轉換、首字母大寫等等。

3. 定義過濾器

Vue 過濾器有全局注冊和局部注冊兩種方式。全局注冊的過濾器可以在項目中的所有組件中使用，局部注冊的過濾器只能在當前組件內部使用。
過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由 “管道” 符號表示：

<!-- 在雙花括號中 -->
{{ message | filteName }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | filteName"></div>

接下來我們介紹全局過濾器和局部過濾器的注冊方式。

3.1. 定義全局過濾器

通過 Vue.filter (name, function (){} ) 方式注冊全局過濾器，第一個參數 name 為自定義過濾器名稱；第二個參數是過濾函數，返回處理后的值。

一個首字母大寫的過濾器：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>英文名：</label>
      <input type="text" v-model="name"/>
    </div>
    <div>{{ name | capitalize}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.filter('capitalize', function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        name: ''
      }
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
JS 代碼第 3-7 行，我們定義了過濾器 capitalize，用來給字符串的首字母大寫。
HTML 代碼第 6 行，我們通過插值的方式使用過濾器 capitalize。

3.2 定義局部過濾器

在 Vue 實例 options 中使用 filters 選項來注冊局部過濾器，這樣過濾器只能在這個實例中使用：

filters: {
  '過濾器名字': function(value) {
    // 具體過濾邏輯
  }
}

具體示例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>英文名：</label>
      <input type="text" v-model="name"/>
    </div>
    <div>{{ name | capitalize}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        name: ''
      }
    },
    filters: {
      capitalize: function(value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
JS 代碼第 10-16 行，我們定義了局部過濾器 capitalize，用來給字符串的首字母大寫。
HTML 代碼第 6 行，我們通過插值的方式使用過濾器 capitalize。

4. 過濾器串聯

{{ message | filterA | filterB }}

filterA 被定義為接收單個參數的過濾器函數，表達式 message 的值將作為參數傳入到函數中。然后繼續調用同樣被定義為接收單個參數的過濾器函數 filterB，將 filterA 的結果傳遞到 filterB 中。
示例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>英文名：</label>
      <input type="text" v-model="name"/>
    </div>
    <div>{{ name | trim | capitalize}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.filter('capitalize', function(value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  })
  Vue.filter('trim', function(value) {
    return value.replace(/^\s+|\s+$/g,"")
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        name: ''
      }
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
JS 代碼第 3-7 行，我們定義了全局過濾器 capitalize，用來給字符串的首字母大寫。
JS 代碼第 8-10 行，我們定義了全局過濾器 trim，用來處理字符串中的空格。
HTML 代碼第 6 行，我們通過串聯的方式使用兩個過濾器。

5. 接收多個參數的過濾器

過濾器是 JavaScript 函數，因此可以接收參數：

<!-- 在雙花括號中 -->
{{ message | filteName(params1,params2) }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | filteName(params1,params2)"></div>
實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>個數：</label>
      <input type="number" v-model="count"/>
      <label>單位： 1000 </label>
    </div>
    <div>單價： {{price}} / 個</div>
    <div>總價： {{ count | sum(price, unit)}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.filter('sum', function(value, price, unit) {
    return value * price * unit
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        count: 0,
        unit: 1000,
        price: 20
      }
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
JS 代碼第 3-5 行，我們定義了全局過濾器 sum，用來計算購買數量的總價。
HTML 代碼第 8 行，使用過濾器 sum，并傳入參數 price 和 unit。

6. 小結

本節，我們帶大家學習了自定義過濾器的使用方式。主要知識點有以下幾點：

  • 使用 Vue.filter 定義全局過濾器。
  • 使用 Vue 實例上的 filters 屬性定義局部過濾器。
  • 過濾器的串聯和參數的傳遞。