Question

我正在尝试使用一个过滤器实例来接受不同的格式。不太确定我缺少什么。第一个实例正在工作。第二个错误不断（均为第二个错误）

=== 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>

Answer 1

您应该使用

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

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

Answer 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>

具有选项的Vue过滤器

2 个答案: