1. 前言
2. 解释
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。 — 官方定义
过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。过滤器在日常开发中也会大量使用,例如:枚举值的转换、首字母大写等等。
3. 定义过滤器
Vue 过滤器有全局注册和局部注册两种方式。全局注册的过滤器可以在项目中的所有组件中使用,局部注册的过滤器只能在当前组件内部使用。
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由 “管道” 符号表示:
<!-- 在双花括号中 -->
{{ message | filteName }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | filteName"></div>
接下来我们介绍全局过滤器和局部过滤器的注册方式。
3.1. 定义全局过滤器
一个首字母大写的过滤器:
<!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().toupperCase() + value.slice()
})
var vm = new Vue({
el: '#app',
data() {
return {
name: ''
}
}
})
</script>
</html>
3.2 定义局部过滤器
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().toupperCase() + value.slice()
}
}
})
</script>
</html>
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().toupperCase() + value.slice()
})
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: ,
unit: ,
price:
}
}
})
</script>
</html>
6. 小结
本节,我们带大家学习了自定义过滤器的使用方式。主要知识点有以下几点:
- 使用 Vue.filter 定义全局过滤器。
- 使用 Vue 实例上的
filters
属性定义局部过滤器。 - 过滤器的串联和参数的传递。