使用 VueJS 生成从 1900 年到当前年份的年份

2024-03-22

我正在使用 VueJS 创建注册表单!用户必须输入他/她的出生日期。

那么,我如何生成从 1900 年到当前年份的年份<select>元素?

我试过这个:

new Vue ({
  el: '.container',
  methods: {
    getCurrentYear() {
      return new Date().getFullYear();
    }
  }
});
<div class="container">
  <select id="dob">
    <option value="0">Year:</option>
    <option v-for="year in getCurrentYear()" :value="year">{{ year }}</option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

但是,在本例中,年份从 1 开始。那么,我该如何循环<option>年份从 1900 年开始?


  1. 不要在循环中使用方法,而是使用计算属性。
  2. 不要使用v-if in a v-for元素。这不好! https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential
new Vue ({
  el: '.container',
  computed : {
    years () {
      const year = new Date().getFullYear()
      return Array.from({length: year - 1900}, (value, index) => 1901 + index)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div class="container">
<select id="dob">
  <option value="0">Year:</option>
  <option v-for="year in years" :value="year">{{ year }}</option>
</select>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 VueJS 生成从 1900 年到当前年份的年份 的相关文章

随机推荐

  • hiredis Redis 库是否为异步回调创建自己的线程

    我在多线程环境中使用 Redis 并且有一个关于它如何运行的问题 我在我的 C 应用程序中使用hiredis c 库 我的问题是 如果我在触发回调时使用异步模式 回调是否会在 Redis 客户端创建的另一个线程中处理 就像创建调用的线程不会
  • 如何使用 LWUIT - J2ME 在表单元格中添加组合框?

    我想在表格单元格中添加一个组合框以提供拖放选项 LWUIT 我已经使用了这个选项 private String strCmbBox 1 2 3 4 ComboBox comboRdoBox new ComboBox strCmbBox co
  • 是否可以像音乐应用程序或 iTunesU 那样将曲目标题添加到“正在播放控件”菜单中?

    我正在创建一个播放器应用程序 我已经实现了 remoteControlReceivedWithEvent 方法 并且可以通过此按钮更改播放状态 苹果指南 https developer apple com library ios docum
  • 点击标记时如何更改默认相机行为?

    在 Google Maps for iOS SDK 版本 1 2 中 点击标记的默认行为发生了变化 发行说明称 点击标记时的默认行为已更新 还可将相机平移到标记的位置 如何恢复旧行为 即不将相机中心平移到标记的位置 将以下方法添加到您的 G
  • 实现递归 ngFor 循环时清空 ng-template 的上下文数据

    我必须显示书籍类别的层次结构树 但在渲染的 html 中没有获取任何数据 似乎有问题ngTemplateOutput语境 尝试使用隐式和显式方法设置上下文 当明确设置时 例如let list list 类别列表的第一级已呈现 但子类别仍未呈
  • msbuild,如何设置环境变量?

    我正在尝试使用项目文件 例如 vcxproj 设置环境变量 我查看了属性函数 但似乎没有这样的功能 我知道有一种方法可以检索环境变量 但找不到如何设置它 我觉得应该有办法在项目文件中设置环境变量 从 MSBuild v4 0 开始 编码任务
  • 无法在 Vuejs 2 中使用 vuetable-2 检索数据

    我是 Vuejs 2 的新手 目前正在做一个项目 我在用着vuetable 2形成一个数据表Vuejs 2 我目前面临一个问题 无法使用属性 api url vuetable 2 检索数据 但是 我可以使用 Axios 和全局 Axios
  • 使用 JS 操作 HTML 中的 SVG

    我在 html 嵌入的 svg 图像中使用 javascript 构建 svg 元素时遇到问题 我创建了两个应该完全相同的文件 但其中一个是用 js 构建的 SVG html
  • 如何让 gradle 输出每个依赖项的依赖项哈希

    我有生以来第一次看到这样的情况 gradle compileJava check在本地运行良好 但是当我尝试使用 bitbucket 管道运行相同的命令时 我得到NoSuchClassDefError I do gradle user lo
  • 使用 ADO 在 IntraWeb 上共同初始化错误

    已经询问了邪恶交换 但一如既往 这没有帮助 我今天遇到这个问题 使用 IntraWeb 创建独立的 Web 应用程序时 当我尝试在浏览器中测试应用程序的会话时 我在 IDE 中遇到此异常 第一次机会例外 价格为 7C812A6B 异常类 E
  • 仅提取特定页面中使用的 css

    假设您有一个动态生成的网站 过去和现在都有太多人参与其中 并且您现在拥有一组包含超过 20 000 行 CSS 的共享样式表 它根本没有组织 有一些基于类和 id 的选择器 但也有太多基于标签的选择器 然后假设您有 100 个通过某个控制器
  • 按 R 中相似结果分组

    我想对相似的结果 不是唯一的 进行分组 但我不知道该怎么做 我的意思是 我有一个名为 name 的列的 df 它具有类似的结果 例如 ARPO ARPO S L ARPO SL 等 name address ARPO street 1 AR
  • sqoop导入或导出期间的不良记录处理

    我查看了 sqoop 导出操作提供的选项 但找不到任何处理不良记录的选项 例如 在大量记录中 偶尔可能会出现一个字符 而该字符应该是数字 有没有一种方法可以在 sqoop 中处理这些情况 而不会导致作业失败并在文件中提供错误记录 Sqoop
  • 如何将VM选项添加到jar文件中?

    我需要添加 Djava security policy myPolicyFile这样我的 RMI jar 就可以工作了 或者还有其他方法可以运行吗 如果你想在有人使用启动你的 jar 时添加 Djava jar 这是不可能的 因为不可能在
  • 如何制作可扩展的表格视图单元格?

    我想要一个表格视图单元格 当您点击它时 它的高度会增加以显示一些描述文本 当您再次点击它时 它会切换回较低的版本 这可能吗 如果可能的话 我将如何实现它 提前致谢 Use CGFloat tableView UITableView tabl
  • 使用 Spring MVC 框架清理用户输入

    我正在使用 spring mvc 框架开发 Web 应用程序 我想知道是否有任何最好的方法来清理用户输入或通用方法来清理 springs 中的所有用户输入以避免 XSS 和 Sql 注入攻击 您可以使用Filters在 Spring 框架中
  • 什么是 kthreadd 进程和子进程以及它与 init 和子进程有何不同

    我想知道什么是kthread以及为什么它不占用任何内存并且没有打开的文件 我编写了一些代码 它将简单地以父子树格式打印当前正在运行的进程的 PID 以及一些附加信息 例如使用的 VMZ RSS 线程 打开文件 PID 2 的所有子进程命名为
  • 垂直于给定点的直线

    如何从给定点在线段上绘制垂线 我的线段定义为 x1 y1 x2 y2 如果我从点 x3 y3 绘制垂直线并且它与点 x4 y4 上的线相交 我想找出这个 x4 y4 我帮你解了方程 k y2 y1 x3 x1 x2 x1 y3 y1 y2
  • Jquery $() - 它返回什么,$()[0] 是什么?

    我正在看一个如何使用 jqGrid 的示例 它是一个 jQuery 插件 它在 id 为 list 的 div 中绘制网格 它创建网格 list jqGrid 但它填充了网格 list 0 addJSONData 我一直在网上寻找关于 jQ
  • 使用 VueJS 生成从 1900 年到当前年份的年份

    我正在使用 VueJS 创建注册表单 用户必须输入他 她的出生日期 那么 我如何生成从 1900 年到当前年份的年份