Filter

过滤器的主要作用就是过滤数据，让数据按照我们规定的格式来做展示
过滤器要先定义后使用
过滤器中的方法必须要有return，如果没有，页面什么都不会渲染。
return返回的数据就是过滤后的数据，经过返回后，就会在页面上渲染过滤后的数据
过滤方法的形参用于接收要过滤的数据，过滤器方法在调用时不需要加()
- 例如：{{ price | RMBFormat}}
- ｜前面是数据，后面是过滤器名称

全局过滤器

全局过滤器，可以在所有组件中使用，一般写在/src/main.js文件中

不管是局部过滤器还是全局过滤器,都必须要return一个值回去。

1import Vue from 'vue'
2import App from './App.vue'
3
4Vue.config.productionTip = false
5
6// 全局过滤器
7Vue.filter('moneyFormat',(value)=>{
8  return `${value.toFixed(2)} 元`
9})
10
11new Vue({
12  render: h => h(App),
13}).$mount('#app')

局部过滤器

局部过滤器只能在当前组件中使用

1<template>
2  <div>
3    {{ price | RMBFormat }}
4  </div>
5</template>
6
7<script>
8export default {
9  data() {
10    return {
11      price: 100,
12    };
13  },
14  filters: {
15    RMBFormat(value) {
16      return `¥ ${value.toFixed(2)}`;
17    },
18  },
19};
20</script>
21
22<style lang="less" scoped>
23</style>

过滤器使用场景

人民币：¥ 100 元

1Vue.filter('RMBformat', val => {
2  return "¥ " + Number(val).toFixed(2) + " 元"
3})

时间戳：new Date().getTime()

1Vue.filter('dateFormat',val=>{
2  let dateObj = new Date(val);
3  let year = dateObj.getFullYear();
4  let months = dateObj.getMonth()+1;
5  months = months < 10 ? '0' + months : months;
6  let days = dateObj.getDate();
7  days = days < 10 ? '0' + days : days;
8  let hours = dateObj.getHours();
9  hours = hours < 10 ? '0' + hours : hours;
10  let minutes = dateObj.getMinutes();
11  minutes = minutes < 10 ? '0' + minutes : minutes;
12  let seconds = dateObj.getSeconds();
13  seconds = seconds < 10 ? '0' + seconds : seconds;
14  
15  return `${year}年${months}月${days}日 ${hours}:${minutes}:${seconds}`
16})

Filter#

全局过滤器#

局部过滤器#

过滤器使用场景#

Filter

全局过滤器

局部过滤器

过滤器使用场景