如何在VueJS

时间：2016-09-01 17:17:21

标签： javascript vue.js

使用Vue.JS 1.0，我找不到一种简单的方法来正确格式化可以为空的JSON日期。

我尝试使用vue-filter npm package date filter，但如果日期为空，则会失败。例如，如果我的数据是：

{ name: "John", birthday: null },  /* unknown birthday */
{ name: "Maria", birthday: "2012-04-23T18:25:43.511Z" },

返回

John 12/31/1969 9:00:00 PM  <-- null date should be blank 
Maria 4/23/2012 3:25:43 PM  <-- ok

我正在使用的代码：

<!DOCTYPE html><html>
<head>
    <script src="lib/vue/dist/vue.min.js"></script>
    <script src="lib/vue-filter/dist/vue-filter.min.js"></script>
</head>
<body>
<div id="app">
    <h1>Without Filter:</h1>
    <div v-for="person in list">
        <div>{{person.name}}  {{person.birthday}}</div>
    </div>
    <h1>With Filter:</h1>
    <div v-for="person in list">
        <div>{{person.name}}  {{person.birthday | date }}</div>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            list: [
                { name: "John", birthday: null },
                { name: "Maria", birthday: "2012-04-23T18:25:43.511Z" },
            ]
        }
    });
</script>
</body>
</html>

格式化日期的正确方法是什么，如果日期为空，也会显示空白？

2 个答案:

答案 0 :(得分：2)

编写自定义过滤器以包装日期过滤器。如果输入为null，则返回null，否则返回Vue.filter('date')(input) 

Vue.filter('dateOrNull', function(d, ...others) {
  return d ? Vue.filter('date')(d, ...others) : null;
});
new Vue({
  el: "#app",
  data: {
    list: [{
      name: "John",
      birthday: null
    }, {
      name: "Maria",
      birthday: "2012-04-23T18:25:43.511Z"
    }, ]
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="//rawgit.com/wy-ei/vue-filter/master/dist/vue-filter.min.js"></script>
<div id="app">
  <h1>Without Filter:</h1>
  <div v-for="person in list">
    <div>{{person.name}} {{person.birthday}}</div>
  </div>
  <h1>With Filter:</h1>
  <div v-for="person in list">
    <div>{{person.name}} {{person.birthday | dateOrNull '%B'}}</div>
  </div>
</div>

答案 1 :(得分：1)

效果不佳

罗伊完全回答了我的要求。但事实证明vue-filter对我的需求并不好。我需要'%c'以浏览器的语言环境格式显示日期（糟糕的主意）。 vue-filter源实际上正在执行以下操作:(作为独立过滤器重写，以避免依赖）：

Vue.filter('date', function (d) {
    var date = new Date(d);
    return d ? date.toLocaleDateString() + ' ' + date.toLocaleTimeString().trim() : null;
});

很糟糕：每个浏览器的工作方式都不同。时区未知的日期假定为UTC并移至当地时区，因此生活在GMT-3时： javascript toLocaleDateString screws timezones

新计划：

将Moment.js与自定义过滤器结合使用：

Vue.filter('moment', function (date) {
    var d = moment(date);
    if (!d.isValid(date)) return null;
    return d.format.apply(d, [].slice.call(arguments, 1));
});

不要忘记<script src='moment.js'>。

用法：{{ date | moment "dddd, MMMM Do YYYY" }}

另请参阅：Moment Date and Time Format Strings

  

我也试过vue-moment npm包但是它取决于CommonJS / require()语法，我不想仅仅为此使用webpack / browserify，

相关问题
最新问题