Vue 定义过滤器

发布时间：2023-04-18 15:12:34 所属栏目：教程来源：

导读：Vue 过滤器有全局注册和局部注册两种方式。全局注册的过滤器可以在项目中的所有组件中使用，局部注册的过滤器只能在当前组件内部使用。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在

Vue 过滤器有全局注册和局部注册两种方式。全局注册的过滤器可以在项目中的所有组件中使用，局部注册的过滤器只能在当前组件内部使用。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由 “管道” 符号表示：


{{ message | filteName }}

<div v-bind:id="message | filteName"></div>
接下来我们介绍全局过滤器和局部过滤器的注册方式。

定义全局过滤器

通过 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().toupperCase() + value.slice()
})
var vm = new Vue({
el: '#app',
data() {
return {
name: ''
}
}
})
</script>
</html>
代码解释：
JS 代码第 3-7 行，我们定义了过滤器 capitalize，用来给字符串的首字母大写。
HTML 代码第 6 行，我们通过插值的方式使用过滤器 capitalize。

定义局部过滤器

在 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().toupperCase() + value.slice()
}
}
})
</script>
</html>
代码解释：
JS 代码第 10-16 行，我们定义了局部过滤器 capitalize，用来给字符串的首字母大写。
HTML 代码第 6 行，我们通过插值的方式使用过滤器 capitalize。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!