1, 过滤器

1.1, 过滤器的使用

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)

• 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

局部过滤器

// MyComponent1.vue
<template>
  <div>
    <!-- 使用过滤器，需要对time时间进行格式化，进行过滤 -->
    <h1>{{ time | timeFormat }}</h1>   
  </div>
</template>

<script>
// 引入moment  moment是专门用来处理时间
import moment from "moment";
export default {
  name: "MyComponent1",
  props: [],
  data() {
    return {
      time: Date.now(),
    };
  },
  methods: {},
  // 在filters选项中，可以配置局部过滤器
  // 在这里配置的局部过滤器，只能在当前组件中使用
  //   filters: {
  //       // 定义了一个过滤器，叫timeFormat
  //       // 在模板中，就可以使用过滤器了
  //       timeFormat(params){
  //         //   console.log(params);
  //         // 利用moment对时间进行格式化
  //         // return 666;

  //         // 需要return一个格式化后的时间
  //         return moment(params).format("YYYY-MM-DD")
  //       }
  //   },
};
</script>

<style lang="less" scoped>
</style>

// MyComponent2.vue
<template>
  <div>
      <h1>{{ time | timeFormat }}</h1>
  </div>
</template>

<script>
export default {
  name: "MyComponent1",
  props: [],
  data() {
    return {
        time:Date.now(),
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
</style>

// App.vue
<template>
  <div id="app">
    App
    <hr>
    <MyComponent1></MyComponent1>
    <hr>
    <MyComponent2></MyComponent2>
  </div>
</template>

<script>
import MyComponent1 from "./components/MyComponent1.vue"
import MyComponent2 from "./components/MyComponent2.vue"
export default {
  name: 'App',
  data(){
    return{
      msg3:"abc"
    }
  },
  components: {
    MyComponent1,
    MyComponent2
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

全局过滤器

// main.js
import Vue from 'vue'
import App from './App.vue'

import moment from "moment"

Vue.config.productionTip = false

// 定义全局过滤器
// 第一个参数是过滤器的名字
// 第二个参数是回调函数  
Vue.filter("timeFormat",(val)=>{
  return moment(val).format("YYYY-MM-DD")
})


new Vue({
  render: h => h(App),
}).$mount('#app')