Vue----过滤器(Vue3弃用)
文章目录
-
- 4 过滤器(Vue3弃用)
-
- 4.1 过滤器的定义
- 4.2 私有过滤器和全局过滤器
- 4.3 连续调用多个过滤器
- 4.4 过滤器传参
- 4.6过滤器的兼容性
4 过滤器(Vue3弃用)
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。例如：hello -> Hello
过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用
4.1 过滤器的定义
在创建 vue 实例期间，可以在 filters 节点中定义过滤器。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<div id="app">
<p :title="info | capitalize">{{message | capitalize}}p>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
filters: {
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
}
})
script>
body>
html>
4.2 私有过滤器和全局过滤器
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器。
<script>
// 全局过滤器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
})
script>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<div id="app">
<p :title="info | capitalize">{{message | capitalize}}p>
div>
<div id="app2">
<p>{{abc | capitalize}}p>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
// 全局过滤器
//全局过滤器–独立于每个vm实例之外
// Vue.filter()方法接收两个参数:
//第1个参数，是全局过滤器的"名字“
//第2个参数，是全局过滤器的"处理函数“
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
})
script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
// 私有过滤器，只能被当前 vm 所控制的区域所使用
filters: {
capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
},
},
})
script>
<script>
const vm2 = new Vue({
el: '#app2',
data: {
abc: 'abc'
}
})
script>
body>
html>
4.3 连续调用多个过滤器
过滤器可以串联地进行调用。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<div id="app">
<p :title="info | capitalize">{{message | capitalize | maxLength}}p>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
// 全局过滤器
// 首字母转大写的过滤器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})
// 定义控制文本长度的过滤器
Vue.filter('maxLength', (str) => {
if(str.length <= 10) return str
return str.slice(0, 10) + '...'
})
script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
})
script>
body>
html>
4.4 过滤器传参
过滤器的本质是 JavaScript 函数，因此可以接收参数。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<div id="app">
<p :title="info | capitalize">{{message | capitalize | maxLength(3)}}p>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
// 全局过滤器
// 首字母转大写的过滤器
Vue.filter('capitalize', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1)
})
// 定义控制文本长度的过滤器
// 过滤器处理函数的形参列表中:
// 第一个参数:永远都是"管道符“前面待处理的值
// 从第二个参数开始，才是调用过滤器时传递过来的arg1 和arg2参数
Vue.filter('maxLength', (str, len = 10) => {
if(str.length <= len) return str
return str.slice(0, len) + '...'
})
script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js',
info: 'title info',
},
})
script>
body>
html>
4.6过滤器的兼容性
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中：
如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明：