vue基础-过滤器(Filters)

目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值(由管道符调用)

Vue中的过滤器场景

过滤器只能用在, <插值表达式和v-bind表达式>

例子：全局定义

Vue.filter("过滤器名", (值) => {return "返回处理后的值"}
字母转大写, 输入"hello", 输出"HELLO"

Vue.filter('filterA',(val) =>val.toUpperCase())
Vue.config.productionTip =false

<template><div><h5>原始数据:{{ message }}</h5><h5>使用全局过滤器实现数据大写:{{message | filterA}}</h5></div>
</template><script>
export default {data(){return{message:'hello'}}
};
</script>

局部定义

filters: {过滤器名字: (值) => {return "返回处理后的值"}
第一个字符小写, "输入HELLO", 输出"hELLO"

语法:

过滤器传参: vue变量 | 过滤器(实参)

多个过滤器: vue变量 | 过滤器1 | 过滤器2

<template><div><h5>原始数据:{{ message }}</h5><a href="#" :title="message | filterB">使用局部过滤器实现数据大写</a>//可以传多个过滤器<h5>多个过滤器使用:{{message | filterA |filterC}}</h5><p>原来的样子: {{ msg }}</p><!-- 1.给过滤器传值语法: vue变量 | 过滤器名(值)--><p>使用翻转过滤器: {{ msg | reverse('|') }}</p><!-- 2.多个过滤利使用语法: vue变量 | 过滤器1 | 过滤器2--><p :title="msg | toUp | reverse('|')">鼠标长停</p></div>
</template>

<script>
export default {filters: {filterB(val){return val.toUpperCase()},filterC(val){return val.charAt(0).toLowerCase() + val.slice(1)//字符串拼接方法 将第一个首字母改为小写 后面是大写}},data(){return{message:'hello'}}
};
</script>

总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器

过滤器注意点

要定义到filter节点上，本质是一个函数

在过滤器函数中，一定要有return值

在过滤器的形参中，就可以获取到管道符前面待处理的那个值

如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”调用的是私有过滤器

vue基础-过滤器(Filters)相关推荐

vue中过滤器filters的this指向问题。
今天在完成一个时间戳转化时想试试vue的过滤器filters,代码如下: execute_time(time) {if (time === 0) return '/'else return this. ...
Angualr设置自定义管道Pipe（类似Vue的过滤器filters）货币格式化（实现内置管道CurrencyPipe的功能）
新建管道: ng g pipe pipes/money或ng g p pipes/money pipes/money.pipe.ts,同时在父级module.ts加入 im ...
vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
vue 过滤器 filters
<!-- 过滤器: 定义:对要显示的数据进行特定格式化之后再显示(使用与一些简单的逻辑)语法:1. 注册过滤器:Vue.filter.(name, callback) 或 new Vue{fil ...
带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
vue如何过滤html标签,Vue过滤器filters使用详解
这次给大家带来Vue过滤器filters使用详解,Vue过滤器filters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 示例代码采用vue单文件组件,使用moment插件格式化日期 {{ ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
vue基础，加少量的webpack，以及脚手架搭建vue项目
这是我学习vue基础时候的笔记,在b站上跟着敲的,一开始是有道云笔记的形式,为了上传到博客整理了两个小时改成了markdown的形式,喜欢的点个赞,谢谢. 文章目录一. vue基本使用 1. 实例参 ...
Vue基础：万字笔记，精华总结
本篇涉及Vue的基础使用 Vue组件化编程请看 Vue进阶:组件化编程(脚手架) - 万字总结精华整理文章目录一.Vue介绍二.基础引入 2.1 基本使用 2.2 模板语法 2.3 Vue数据绑 ...
Vue基础入门(二）
Vue基础入门目录一.过滤器vue3已经删除!!!!!! 1.什么是过滤器(Filters) 2.代码展示 3.私有过滤器和全局过滤器 4.过滤器的注意点 5.优化时间代码示例二.watch 侦听 ...

vue基础-过滤器(Filters)

vue基础-过滤器(Filters)相关推荐

最新文章

热门文章