如何在vuecli中使用Moment.js

Question

我有npm安装了vue-moment。我需要通过for循环将日期传递给p标签。此外，我需要创建一个方法，我可以在我的日期添加天数，以便它将在该天数后的日期。我该怎么做或我哪里错了

main.js代码：

Vue.use(require("vue-moment"));

vuecomponent代码：

<template>
  <div>
    <div>
      <span>{{ new Date() | moment("MM.DD.YY") }}</span>
    </div>
    <p v-for="data in printdata" :key="data.index" v-html="data.name"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printdata: [
        {
          name: "paraone"
        },
        {
          name: "<span>{{ new Date() | moment('MM.DD.YY') }}</span>"
        },
        {
          name: "parathree"
        },
        {
          name: "parafour"
        }
      ]
    };
  },
  components: {},

  methods: {
    changeDate: function() {
      var todaydate = new Date();
      moment(todaydate).format("YYYY-MM-DD");
      this.printdata[0].name = todaydate;
    }
  },
  created() {
    this.changeDate();
  }
};
</script>

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

div标签中的那个正如预期的那样工作，但我如何在第二个p标签中获取日期？

Answer 1

Vue-moment是一套有用的Vue qazxsw poi，适用于日常的Moment功能。

你在这里做的“错误”是至少对于Vue 2.0，filters，而不是v-html。

为了实现您在此处尝试实现的目标，您需要分离脚本和标记。您可以通过两种方式执行此操作，因为我在下面的修改后的代码中显示：

1. 拆分字符串，以便您可以执行JavaScript，然后将其转换回字符串：filters only work in mustache tags and v-bind
2. 您也可以尝试使用函数来完成工作（就像在"<p>"+ 5*5 +"</p>"中所做的那样） 我稍微修改了你的功能。时刻默认为今天的日期，因此无需获得changeDate

new Date()

Vue.use(vueMoment.install);

new Vue({
  el: '#app',
  data() {
    return {
      printdata: [
        {
          name: "paraone"
        },
        {
          name: "<span>" + moment().format('MM.DD.YY') + "</span>"
        },
        {
          name: "parathree"
        },
        {
          name: "parafour"
        }
      ]
    };
  },
  components: {},

  methods: {
    changeDate: function() {
      const todayDate = moment().format("YYYY-MM-DD");
      this.printdata[0].name = todayDate;
    }
  },
  created() {
    this.changeDate();
  }
});

Answer 2

我知道我哪里错了。我没有在组件的脚本标签中导入时刻。我不得不这样做

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div>
      <span>{{ new Date() | moment("MM.DD.YY") }}</span>
    </div>
    <p v-for="data in printdata" :key="data.index" v-html="data.name"></p>
  </div>
</div>

现在它的工作正常。