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只是日常Moment功能的一组有用的Vue filters。

您在这里执行的“错误” 是至少对Vue 2.0来说是filters only work in mustache tags and v-bind，而不是v-html。

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

拆分字符串，以便您可以执行JavaScript，然后将其转换回字符串："<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();
  }
});

<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

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

GO.db

现在可以正常工作了。

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>

如何在vuecli中使用Moment.js

3 个答案: