Vue.js 的过滤器你了解多少
作者：泽哥ins 时间：2024-04-28 09:26:37
一、过滤器作用
过滤器用于进行文本内容格式化处理。
二、过滤器的使用方式
过滤器可以在插值表达式和 v-bind 中使用。
三、过滤器的分类
全局过滤器
局部过滤器
四、全局过滤器
全局过滤器可以在任意Vue实例中使用。
语法书写方式如下：
Vue.filter('过滤器名称'，function(value) {
//逻辑代码
return '处理结果';
})
注意：示例中的 | 竖线表示管道符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15.全局过滤器</title>
</head>
<body>
<div id="app">
<p v-bind:title="value | filterA">这是标签</p>
<p>{{ value | filterA }}</p>
</div>
<div id="app2">
<p v-bind:title="value | filterA">这是标签</p>
<p>{{ value | filter}}</p>
</div>
<script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
<script>
Vue.filter('filterA',function (value) {
return value.split('-').join('');
})
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
})
new Vue({
el: '#app2',
data: {
value: 'a-b-c'
}
})
</script>
</body>
</html>
• 全局过滤器可以将一个数据传入到多个过滤器中进行处理。
<body>
<div id="app">
<p>{{ value | filterA | filterB }}</p>
</div>
<script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
<script>
Vue.filter('filterA',function (value){
console.log(value + ' filterA');
return value.split('-').join('');
})
Vue.filter('filterB',function (value) {
console.log(value + ' filterB');
return value[0].toUpperCase() + value.slice(1);
})
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
})
</script>
</body>
• 一个过滤器可以传入多个参数。
<body>
<div id="app">
<!-- 注意：参数1永远是管道符左边的value -->
<p>{{ value | filterC('TGW—',200)}}</p>
</div>
<script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
<script>
Vue.filter('filterC', function(par1,par2,par3) {
console.log(par1,par2,par3);
return par2 + par1.split('-').join('');
});
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
})
</script>
</body>
五、局部过滤器
• 局部过滤器只能在当前 Vue 实例中使用。其他的Vue实例中无法访问。
<div id="app">
<p>{{ content | filterA }}</p>
<p>{{ content2 | filterA }}</p>
<p>{{ content | filterA | filterB }}</p>
<p>{{ content | filterA | filterC('TGW—')}}</p>
</div>
<!-- <div id="app2">
<p>{{ content | filterA }}</p>
</div> -->
<script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: 'a-b-c',
content2: 'd-e-f'
},
filters: {
filterA: function (value){
console.log(value);
return value.split('-').join('')
},
filterB: function (value) {
return value.split('').reverse().join('')
},
filterC (value,prefix) {
return prefix + value;
}
}
})
// new Vue({
// el: '#app2',
// data: {
// content: 'g-h-i'
// }
// })
</script>
</body>
六、全局过滤器和局部过滤器重名现象
当我们出现全局过滤器和局部过滤器名字一样时，那么我们再执行的时候，是按照就近原则进行执行的，所以执行的是局部过滤器的代码块。
<body>
<div id="app">
<p>{{ content | filterA }}</p>
</div>
<script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
<script>
Vue.filter('filterA', function (value){
return value.split('').reverse().join('')
})
new Vue({
el: '#app',
data: {
content: 'a-b-c'
},
filters: {
filterA (value) {
return value.split('-').join('')
}
}
})
</script>
</body>
来源：https://blog.csdn.net/qq_36213140/article/details/122780129
标签：Vue.js,过滤器
0
投稿猜你喜欢
python图像处理之反色实现方法
2021-06-28 20:35:43
定位？浮动？自适应？
2008-06-30 14:20:00
python中slice参数过长的处理方法及实例
2023-07-13 13:12:10
马化腾关于产品设计与用户体验的培训
2009-02-12 11:45:00
php让json_encode不自动转义斜杠“/”的方法
2023-08-19 17:04:28
SQL Server 常用函数使用方法小结
2024-01-13 11:39:32
ubuntu kylin 14.10下多个mysql 5.7.14安装教程
2024-01-24 12:50:13
Opencv图像处理:如何判断图片里某个颜色值占的比例
2023-09-27 16:57:40
JavaScript判断对象是否为数组
2024-04-22 22:42:14
对python创建及引用动态变量名的示例讲解
2023-02-03 07:10:49
Python中is与==的使用区别详解
2023-10-15 04:08:21
Python统计文件中去重后uuid个数的方法
2023-07-11 17:20:06
Python对XML文件实现增删改查操作
2023-11-19 20:42:03
手动安装python3.6的操作过程详解
2021-05-13 11:30:56
sqlserver数据库移动数据库路径的脚本示例
2024-01-28 05:06:49
win2000server IIS和tomcat5多站点配置
2023-06-26 04:45:33
C#连接Oracle数据库的实例方法
2024-01-20 14:37:05
Cython处理C字符串的示例详解
2021-12-03 01:17:27
Python django框架输入汉字，数字，字符生成二维码实现详解
2022-12-13 00:23:24
Python装饰器限制函数运行时间超时则退出执行
2022-09-07 18:12:54