过滤与方法
首先我们写一个普通的方法，一会儿我们用过滤来实现可以比较一下差别
比如说我们要实现一个把数字转化成价格显示的功能，methods实现如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<div id="app">
￥{{changePrice(price)}}
</div>
</template>
<script>
export default {
name: "home",
data: function () {
return {
price: 12684000000,
};
},
methods: {
changePrice: function (price) {
var strPrice = String(price);
return strPrice.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
},
},
};
</script>
|
而用过滤filters实现如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<div id="app">
￥{{price|changePrice}}
</div>
</template>
<script>
export default {
name: "home",
data: function () {
return {
price: 12684000000,
};
},
filters: {
changePrice: function (price) {
var strPrice = String(price);
return strPrice.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
},
},
};
</script>
|
我们可以看到过滤和方法中实现的函数其实是相同的，没有什么区别，只有在使用上的差别
过滤的方式{{price|changePrice}}更直观简洁
过滤的参数
过滤的本质，是让表达式的第一个参数默认成为函数的第一个参数，所以其实有两个参数的函数也可以用过滤的方式来实现，比如说我们对给刚才的函数增加一个先加一个数字然后转化为价格的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script>
export default {
name: "home",
data: function () {
return {
price: 12684000000,
};
},
filters: {
changePrice: function (price, addval) {
var strPrice = String(price + addval);
return strPrice.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
},
},
};
</script>
|
使用时，只要从第二个参数开始在括号内添加即可
1
2
3
4
5
| <template>
<div id="app">
￥{{price|changePrice(100)}}
</div>
</template>
|
过滤的级联
vue的filters支持级联，比如我们本来想要嵌套两个函数{{changePrice(add(price,100))}}，用filters只需要这么写{{price|add(100)|changePrice}}
具体例子如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<div id="app">￥{{ price | add(100) |changePrice }}</div>
</template>
<script>
export default {
name: "home",
data: function () {
return {
price: 12684000000,
};
},
filters: {
changePrice: function (price) {
var strPrice = String(price);
return strPrice.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
},
add: function (price, addval) {
return price + addval;
},
},
};
</script>
|
全局注册
如果一个过滤器使用的特别频繁，我们可以在main.js中全局注册，在所有组件和页面中直接使用即可
1
2
3
4
5
6
7
8
| Vue.filter("changePrice", (price) => {
var strPrice = String(price);
return strPrice.replace(/(\d)(?=(\d{3})+$)/g, "$1,");
})
Vue.filter("add", (price, addVal) => {
return price + addVal
})
|
