如何在vuecli中使用Moment.js

Question

我已经安装了vue-moment的npm包。我需要通过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>

标签中的内容已如预期那样工作，但是如何获取第二个

标签中的日期？

- Ram

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>

- DevonDahon

---

谢谢！这是对像我这样的新手最完整的指南。我将导入部分更改为import moment from 'moment'。我不太理解为什么有那么多变化/方式。 - Coisox

Answer 2

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

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

现在它正常工作。

- Ram

Answer 3

Vue-moment只是一组有用的Vue 过滤器，用于日常Moment函数。

你在这里犯了一个“错误”，至少对于Vue 2.0来说，过滤器只能在mustache标签和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>

- Sølve T.

---

我得到的错误与之前相同。在 vscode 中显示 moment 未定义。 - Ram

你没有提到在VScode中moment未被定义的问题。然而，它应该可以工作，问题只是vscode无法理解这两个文件最终被拼接在一起。 - Sølve T.

我找到了解决方案。我必须在调用moment()函数的地方导入它。 - Ram