带有选项的 Vue 过滤器答案

【问题标题】：Vue filter with options带有选项的 Vue 过滤器
【发布时间】：2018-07-16 21:41:49
【问题描述】：

我正在尝试使用一个过滤器实例来接受不同的格式。不太确定我错过了什么。第一个实例正在运行。第二个一直报错（第二个都是）

=== main.js ===
Vue.filter('formatDate', function (value, config) {
  console.log('test');
  if (config === 'time') {
    return format(value, 'YYYY/MM/DD hh:mm');
  } else {
    return format(value, 'YYYY/MM/DD');
  }
});

=== Page.vue ===
-- first instance -- <p> {{ item.date | formatDate }} </p>

-- second instance -- <p> {{ item.date | formatDate 'time' }} </p>
-- also second instance -- <p> {{ item.date | formatDate, 'time' }} </p>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你应该使用

{{ item.date | formatDate('time') }}

如 Vue.js 文档中关于过滤器的描述：https://vuejs.org/v2/guide/filters.html

【讨论】：

【解决方案2】：

将time 作为参数传递给formatDate 过滤器，因此语法应为item.date | formatDate('time')。见Vue filters。

Vue.filter('formatDate', function (value, config) {
  if (config === 'time') {
    return 'with time';
  } else {
    return 'default';
  }
});

new Vue({
  el: '#app',
  data: {
    item: {
      date: new Date()
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>

<div id='app'>
  <p> {{ item.date | formatDate('time') }} </p>
</div>

【讨论】：