1、过滤器简介

1.1、全局过滤器与局部过滤器

过滤器本质上是一个函数，与自定义指令类似。

全局过滤器

Vue.filter(id, [definition])

局部过滤器

new Vue({el: '#app',filters: {definition(value): {...}}})

案例：将字符串首字母转换为大写字母的全局过滤器

Vue.filter('capitalize', function (value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);})

如果换成局部过滤器

let vm = new Vue({el: '#app',data: { // 参数定义，字典形式},computed: { // 计算属性，多次调用，只计算一次},methods: { // 普通方法，多次调用，多次计算},filters: { // 过滤器capitalize(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);}}
})

注意：

当全局过滤器和局部过滤器重名，会采用局部过滤器

与自定义命令一样，全局过滤器可以在任何 Vue 实例的模板中使用，而局部过滤器只能在该实例绑定的视图中使用

过滤器可以使用在两个地方：

双花括号：{{ 变量 | 过滤器 }}
v-bind 表达式：v-bind:href=“变量 | 过滤器”

2、过滤器的参数

过滤器函数总是接收表达式的值作为第一个参数，过滤器本质上是一个 JS 函数，自然可以接收多个参数。

不建议把过滤器功能做的很复杂，这违背了过滤器的设计初衷,比如：Vue.filter(‘format’, function (value, …params) {…})

实例：为表达式的值添加前后缀的过滤器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><body>
<div id="app"><h2>过滤器</h2><!-- 输出：vue-filters.js --><p>{{ filename | format('vue', suffix) }}</p>
</div><script src="VueJs/vue.js"></script>
<script>Vue.filter('format', function (value, prefix, suffix) {if (!value) return '';value = value.toString();return prefix + "-" + value + "." + suffix;})let vm = new Vue({el: '#app',data: {filename: 'filters',suffix: 'js'},computed: { // 计算属性，多次调用，只计算一次},methods: { // 普通方法，多次调用，多次计算},filters: { // 过滤器}})
</script>
</body>
</html>

3、过滤器的串联

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.profile {}</style>
</head><body>
<div id="app"><h2>过滤器</h2><!--  输出结果：DLROW OLLEH  --><p>{{ message | uppercase | reverse }}</p>
</div><script src="VueJs/vue.js"></script>
<script>Vue.filter('uppercase', function (value) {if (!value) return '';value = value.toString();return value.toUpperCase();})Vue.filter('reverse', function (value) {if (!value) return '';value = value.toString();return value.split('').reverse().join('');})let vm = new Vue({el: '#app',data: {message: 'hello world'},computed: { // 计算属性，多次调用，只计算一次},methods: { // 普通方法，多次调用，多次计算},filters: { // 局部过滤器}})
</script>
</body>
</html>

Vue（3）之过滤器相关推荐

vue学习日志-过滤器
一.过滤器 1.1 概述 (1)过滤器(Filters)提供了一种执行文本转换的方法,比如说都转换成大写字母或者几乎做任何我们想做的事情. (2)过滤器既可以在双花括号插值中使用,也可以在 v- ...
Vue中的过滤器(filter)
一.Vue中的过滤器是什么过滤器(filter)是输送介质管道上不可缺少的一种装置,大白话,就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用 ...
Vue.js中过滤器（filter）的使用
Vue.js 过滤器的基本使用(filter) vue中的过滤器分为两种:局部过滤器和全局过滤器.全局过滤器定义在vue类中,句柄过滤器定义在vue实例中. 1.定义无参全局过滤器 Vue.filte ...
Vue中filters过滤器无效的原因
Vue中filters过滤器无效的原因如果你的过滤器内部需要用到循环请不要使用map函数代替for循环或者是foreach循环如图: 因为过滤器本身需要一个return 把结果返回出去然而ma ...
Vue中的过滤器学习
在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式.首先我们要知道,Vue中的过滤器不能替代Vue中的methods.computed或者watch,因为过滤器不改变真正的data,而 ...
04、Vue.js---自定义过滤器
2019独角兽企业重金招聘Python工程师标准>>> 自定义过滤器的关键字是 filter. 官网描述:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤 ...
【Vue】全局过滤器和局部过滤器
Vue.js 允许自定义过滤器,可用作一些常见的文本格式化.过滤器可以用在两个地方:mustache 插值和 v-bind 表达式,被添加在 JavaScript 表达式的尾部,由管道符 (" ...
vue学习笔记（一） ---- vue指令（过滤器）
一.什么是过滤器官方文档:https://cn.vuejs.org/v2/guide/filters.html 二.过滤器的使用没有使用过滤器之前: <div id="app&qu ...
Vue中的过滤器（管道）
过滤器:将指定的数据,按照一套流程过滤加工,最后返回一个过滤之后的值注册局部过滤器将过滤器写在filters配置项中的是局部过滤器,只供该vue匹配的容器使用 new Vue({el: '#roo ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...

Vue（3）之过滤器

1、过滤器简介

1.1、全局过滤器与局部过滤器

2、过滤器的参数

3、过滤器的串联

Vue（3）之过滤器相关推荐

最新文章

热门文章

Vue（3）之 过滤器

1、过滤器简介

1.1、全局过滤器与局部过滤器

2、过滤器的参数

3、过滤器的串联

Vue（3）之 过滤器相关推荐

最新文章

热门文章

Vue（3）之过滤器

Vue（3）之过滤器相关推荐