如何在 vue cli 中使用 Moment.js

Question

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

main.js 代码：

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

vue组件代码：

<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

安装moment 库：

cd my-vue-cli-project
npm install moment

将其加载到您的 main.js 文件中：

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

在您的 components/HelloWorld.vue 文件中测试它：

<template>
  <div>
    {{ today }}
  </div>
</template>

<script>
import * as moment from "moment/moment";
export default {
data: function () {
    return {
      today: moment()
    }
  }
}
</script>

Answer 2

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

<script>
import * as moment from "moment/moment";
export default {
  data() {
    return {
      printdata: [
        {
          name: "paraone"
        },
        {
          name: "<span>{{ new Date() | moment('MM.DD.YY') }}</span>"
        },
        {
          name: "parathree"
        },
        {
          name: "parafour"
        }
      ]
    };
  },
  methods: {
    changeDate: function() {
      var todaydate = new Date();
      moment(todaydate).format("YYYY-MM-DD");
      this.printdata[0].name = todaydate;
    }
  },
  created() {
    this.changeDate();
  }
};
</script>

现在它工作正常了。

Answer 3

Vue-moment 只是一组有用的 Vue filters 用于日常 Moment 功能。

您在此处所做的“错误” 至少对于 Vue 2.0，filters only work in mustache tags and v-bind，而不是 v-html。

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

1. 拆分字符串以便您可以执行 JavaScript，然后将其转换回字符串："<p>"+ 5*5 +"</p>"

2. 您也可以尝试使用函数来完成这项工作（就像您在 changeDate 中所做的那样）

   • 我稍微修改了你的函数。 Moment 默认为今天的日期，因此无需获取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();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-moment@4.0.0/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>