计算属性与过滤器的使用

1.计算属性

当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

export default {
  // 计算属性和侦听器
  computed: {
    payTime() {
      let data = new Date(this.endPayTime * 1000);
      let Y = data.getFullYear();
      let M = data.getMonth();
      let D = data.getDate();
      let h = data.getHours();
      let m = data.getMinutes();
      let s = data.getSeconds();
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    }
  },
  methods: {},
  computed: {}
};

2.过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}

<div v-bind:id="rawId | formatId"></div>

import Vue from 'vue'

// 处理演员列表
Vue.filter("joinActors", function (arr) {
    const list = JSON.parse(arr);
    const actorStr = list.map(item => {
        return item.name;
    });
    return actorStr.join(" ");
});

// 格式化日期
Vue.filter('formatDate', (time) => {
    let data = new Date(time * 1000);
    let Y = data.getFullYear();
    let M = data.getMonth();
    let D = data.getDate();
    let h = data.getHours();
    let m = data.getMinutes();
    let s = data.getSeconds();
    return `${Y}-${M}-${D} ${h}:${m}:${s}`;
})

// 使用的时候是需要拿你要的数据名称 后面加上过滤器即可
        // 后台参数名称    过滤器名称
// 下单时间{{enPayTime | formatDate}}

并且在mein.js里引入:

//filter存放过滤器和计算属性
import './filter/index'