此間少年_ ·1. 前言
本小節(jié)我們將學(xué)習(xí)如何使用過濾器。包括如何注冊過濾器、過濾器的使用、過濾器的串聯(lián)、過濾器的傳參。過濾器的使用非常簡單，同學(xué)們只需要多寫幾個例子就可以完全掌握。
2. 慕課解釋
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。 — 官方定義
過濾器是對即將顯示的數(shù)據(jù)做進(jìn)一步的篩選處理，然后進(jìn)行顯示，值得注意的是過濾器并沒有改變原來的數(shù)據(jù)，只是在原數(shù)據(jù)的基礎(chǔ)上產(chǎn)生新的數(shù)據(jù)。過濾器在日常開發(fā)中也會大量使用，例如：枚舉值的轉(zhuǎn)換、首字母大寫等等。
3. 定義過濾器
Vue 過濾器有全局注冊和局部注冊兩種方式。全局注冊的過濾器可以在項(xiàng)目中的所有組件中使用，局部注冊的過濾器只能在當(dāng)前組件內(nèi)部使用。
過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達(dá)式。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由 “管道” 符號表示：
<!-- 在雙花括號中 -->
{{ message | filteName }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | filteName"></div>
接下來我們介紹全局過濾器和局部過濾器的注冊方式。
3.1. 定義全局過濾器
通過 Vue.filter (name, function (){} ) 方式注冊全局過濾器，第一個參數(shù) name 為自定義過濾器名稱；第二個參數(shù)是過濾函數(shù)，返回處理后的值。
一個首字母大寫的過濾器：
<!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 實(shí)例 options 中使用 filters 選項(xiàng)來注冊局部過濾器，這樣過濾器只能在這個實(shí)例中使用：
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. 過濾器串聯(lián)
{{ message | filterA | filterB }}
filterA 被定義為接收單個參數(shù)的過濾器函數(shù)，表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù) filterB，將 filterA 的結(jié)果傳遞到 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 行，我們通過串聯(lián)的方式使用兩個過濾器。
5. 接收多個參數(shù)的過濾器
過濾器是 JavaScript 函數(shù)，因此可以接收參數(shù)：
<!-- 在雙花括號中 -->
{{ 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>個數(shù)：</label>
<input type="number" v-model="count"/>
<label>單位： 1000 </label>
</div>
<div>單價(jià)： {{price}} / 個</div>
<div>總價(jià)： {{ 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，用來計(jì)算購買數(shù)量的總價(jià)。
HTML 代碼第 8 行，使用過濾器 sum，并傳入?yún)?shù) price 和 unit。
6. 小結(jié)
本節(jié)，我們帶大家學(xué)習(xí)了自定義過濾器的使用方式。主要知識點(diǎn)有以下幾點(diǎn)：
- 使用 Vue.filter 定義全局過濾器。
- 使用 Vue 實(shí)例上的
filters屬性定義局部過濾器。 - 過濾器的串聯(lián)和參數(shù)的傳遞。
2025 imooc.com All Rights Reserved |