javascript - 如何在vue js中设置默认日期
问题描述
我想在我的日期选择器中默认设置日期。
代码:
<template lang="html">
<input type="date" v-model="date">
</template>
<script lang="js">
export default {
name: 'component',
props: [],
mounted() {
},
data() {
return {
// date: new Date().toJSON.split('T')[0],
date: new Date(),
}
},
methods: {
},
computed: {
},
}
</script>
不幸的是,它不起作用,有人告诉我 moment js,但我不知道我们如何使用它
解决方案
v-model
在日期输入上使用 yyyy-MM-dd 格式的字符串。如果您乐于在模型中使用字符串,而不是日期对象,那么只需将默认日期字符串放入日期变量中,就像这样。
date : new Date().toISOString().slice(0,10)
这是一个正在运行的示例。已更改名称以避免变量名称接近保留关键字!
vm = new Vue({
el : '#vueRoot',
data : { myDate : new Date().toISOString().slice(0,10) }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id='vueRoot'>
<input type='date' v-model='myDate'>
<br>
{{myDate}}
</div>
当然,如果您想格式化或比较它们,您可能希望将日期作为模型中的日期对象。在这种情况下,您应该避免使用 v-model 并分别对绑定的两侧进行编码,如下所示。
推荐阅读
- python - 计算再入院率
- typescript - Typescript 在超级原型上声明一个可选方法
- python - 如何在 Django 的产品过滤功能中获取公司名称?
- reactjs - 如何在reactjs中使用href(重定向到不同的链接)?
- unity3d - 增强现实 - 如何定义局部坐标系 (Vuforia-Unity)
- imagemagick - 范围不适用于 imagemagick6 mogrify
- java - 警报和服务 - 如何正确启动警报
- azure - 多个子节点的 jsonNodeReference 和 jsonPathDefinition
- javascript - 有谁能够解释为什么在控制台记录变量 countOnlineUsers 时它没有将计数保存在内存中?
- python - python3 venv 看到来自 python2 的包