秒懂Vue2中过滤器基本使用，世界如此简单

作者：管理员 2019-02-15 10:58:44 分类：Vue2.js专栏阅读（8138） 0

什么是过滤器

1、在Vue中使用过滤器（Filters）来渲染数据是一种很有趣的方式。

2、首先我们要知道，Vue中的过滤器不能替代Vue中的methods、computed或者watch，但有时候他们都可以达到同样的目的

3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。

4、在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。

5、在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。

6、vue1中系统提供了几个过滤器,vue2中全部取消了，但并不妨碍我们可以通过关键词filter自定义过滤器，事实上在实际项目开发中，我们更多也是根据项目需求编辑自己的过滤器。在这里有一个vue1.x旧的内置过滤器的完整列表

定义和使用过滤器

1.全局和本地过滤器：你可以跨所有组件访问全局过滤器，而本地过滤器只允许你在其定义的组件内部使用

一、编辑过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**
* 给商品价格加补0
* @param {*} value
*/
const addZero=function(value){
var value=Math.round(parseFloat(value)*100)/100;
var xsd=value.toString().split(".");
if(xsd.length==1){
value=value.toString()+".00";
return value;
}
if(xsd.length>1){
if(xsd[1].length<2){
value=value.toString()+"0";
}
return value;
}
}
export default {
addZero
}

二、在入口文件中引入这个filter文件 (路径以你自己的为准)

1	import filters from '../../../static/filter/filter';

三、在入口文件main.js中全局注册filter

1
2
3
4

//过滤器统一处理加载
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})

四、组件中使用

1	{{content \| addZero}}

局部过滤器

下面这个示例展示了过滤器被注册到一个Vue组件中。这个过滤器的功能是将字母变成大写，局部过滤器存储在Vue组件中，关键词filters属性中的函数。这个时候你想注册多少个就能注册多少个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let app = new Vue({
　　el: '#app',
　　data () {
　　　　return {
　　　　name: 'w3cplus.com'
　　　　}
　　},
　　// 声明一个局部过滤器
　　filters: {
　　　　Upper: function (value) {
　　　　　　return value.toUpperCase()
　　　　}
　　}
})
<div id="app"> <h1>{{ name | Upper }}</h1> </div>

过滤器串连、传参

关于过滤器，我最喜欢的一件事是能够使用管道（|）符号对它们进行串连，并通过一系列过滤器转换一个值。让我们再看一个价格的例子，并让这个价格只保留两位小数，然后加上美元符号。虽然我们可以使用一个单独的过滤器来实现它，但我们也可能想要使用toUSD过滤器。在这种情况下，分离和串连过滤器是一处方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Vue.filter('toFixed', function (price, limit) {
return price.toFixed(limit)
})
Vue.filter('toUSD', function (price){
return `$${price}`
})
let app = new Vue({
el: '#app',
data () {
return {
price: 435.333
}
}
})
<div id="app">
<h1>
{{ price | toFixed(2) | toUSD }}
</h1>
</div>

传参数时候，过滤器第一位默认是value，也就是说形参第二位才是接收参数。当然，过滤器它的功能仅仅不像文章中的这么简单，他可以做任何你想做的事情。如果你对Vue其他的自定义过滤器功能感兴趣的话，可以阅读@wy-ei在Github上创建的Vue过滤器集合。

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(2) 打赏

标签：

filter Vue 过滤器

上一篇：为什么随着年长，男性不愿意花更多的精力去追求女性？

下一篇：简单又实用的时间格式化插件Moment.js