Javascript 如何在vuecli中使用矩.js

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

{{新日期（）|时刻（“MM.DD.YY”）}

导出默认值{
数据（）{
返回{
打印数据：[
{
姓名：“帕拉隆”
},
{
名称：{{新日期（）|时刻（'MM.DD.YY'）}
},
{
名称：“帕拉特里”
},
{
名称：“帕拉福”
}
]
};
},
组件：{}，
方法：{
changeDate:function（）{
var todaydate=新日期（）；
时刻（今天）。格式（“YYYY-MM-DD”）；
此.printdata[0].name=todaydate；
}
},
创建（）{
这个.changeDate（）；
}
};

---

div标记中的一个按预期工作，但如何在第二个p标记中获取日期？

Vue moment只是一组用于日常时刻功能的有用Vue

您在这里所犯的“错误”是，至少对于Vue 2.0，而不是v-html

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

拆分字符串，以便执行JavaScript，然后将其转换回字符串：

“”+5*5+“
”

您还可以在尝试时使用函数来完成此工作（就像您在

changeDate

中所做的那样）

• 我稍微修改了你的函数。时刻默认为今天的日期，因此无需获取新日期（）

Vue.use（vueMoment.install）；
新Vue({
el:“#应用程序”，
数据（）{
返回{
打印数据：[
{
姓名：“帕拉隆”
},
{
名称：“+moment（）.格式（'MM.DD.YY'）+”
},
{
名称：“帕拉特里”
},
{
名称：“帕拉福”
}
]
};
},
组件：{}，
方法：{
changeDate:function（）{
const todayDate=moment（）.格式（“YYYY-MM-DD”）；
此.printdata[0].name=todayDate；
}
},
创建（）{
这个.changeDate（）；
}
});

{{新日期（）|时刻（“MM.DD.YY”）}

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

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


从“时刻/时刻”导入*作为时刻；
导出默认值{
数据（）{
返回{
打印数据：[
{
姓名：“帕拉隆”
},
{
名称：{{新日期（）|时刻（'MM.DD.YY'）}
},
{
名称：“帕拉特里”
},
{
名称：“帕拉福”
}
]
};
},
方法：{
changeDate:function（）{
var todaydate=新日期（）；
时刻（今天）。格式（“YYYY-MM-DD”）；
此.printdata[0].name=todaydate；
}
},
创建（）{
这个.changeDate（）；
}
};

现在它工作正常。
安装
moment
库：

cd my-vue-cli-project
npm install moment

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

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

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

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

在
组件/HelloWorld.vue
文件中测试它：

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

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

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


{{今天}
从“时刻/时刻”导入*作为时刻；
导出默认值{
数据：函数（）{
返回{
今天：时刻（）
}
}
}
我得到的错误与前面的相同。它显示在vscode中时刻未定义你们并没有说任何关于时刻未在vscode中定义的事情。但是，它应该可以工作，问题只是vscode不理解这两个文件在endI中是路径连接在一起的，我找到了解决方案。我必须在调用矩（）函数的地方导入它。谢谢！对于像我这样的新手来说，这是最完整的指南。我将导入部分从“时刻”更改为“导入时刻”

。我不太明白为什么有这么多变化/方式。