如何在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

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

你在这里做的 "mistake" 至少对于 Vue 2.0，filters only work in mustache tags and v-bind，而不是 v-html.

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

拆分字符串以便执行 JavaScript 然后将其转换回字符串："<p>"+ 5*5 +"</p>"
您也可以像您尝试的那样，使用一个函数来完成这项工作（就像您在 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>

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

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

如何在vue cli中使用Moment.js

How to use Moment.js in vuecli

javascript

momentjs

vue.js

vue-cli