有几种简单可靠的方法可以实现这个需求，你可以根据自己的场景选择：

方法1：直接字符串截取（最快捷） #

你的orDate是标准ISO格式的字符串（比如"2010-01-01T00:00:00.000Z"），年份刚好是前4个字符，直接用slice截取就够了：

<div id="app">
  <!-- 记得给v-for绑定唯一key，这里用每条数据的_id最合适 -->
  <div v-for="aln in data" :key="aln._id">
    年份：{{ aln.orDate.slice(0, 4) }}
  </div>
</div>

方法2：利用Date对象（更通用） #

如果以后日期格式可能变化，或者需要处理时区相关的年份，把字符串转成Date对象再提取年份会更稳妥：

<div id="app">
  <div v-for="aln in data" :key="aln._id">
    年份：{{ new Date(aln.orDate).getFullYear() }}
  </div>
</div>

方法3：使用Vue过滤器（复用性强） #

如果多个地方都需要提取年份，推荐定义一个过滤器，方便复用：

组件内局部过滤器示例 #

<template>
  <div id="app">
    <div v-for="aln in data" :key="aln._id">
      年份：{{ aln.orDate | getYear }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {"_id":"5addb7cbcd79850454bceb9f","no":12123,"orDate":"2010-01-01T00:00:00.000Z","oldness":"5"},
        {"_id":"5ae02a26de15e934ac70ee8f","no":11223,"orDate":"2004-01-01T00:00:00.000Z","oldness":"5"},
        {"_id":"5ae02a26de257934ac70ee8f","no":12311,"orDate":"1994-01-01T00:00:00.000Z","oldness":"5"}
      ]
    }
  },
  filters: {
    getYear(dateStr) {
      // 可选：处理空值或非标准格式的情况
      if (!dateStr) return '无日期';
      // 可以选择字符串截取或Date对象方式
      return dateStr.slice(0, 4);
      // return new Date(dateStr).getFullYear();
    }
  }
}
</script>

小提示 #

• 务必给v-for绑定唯一的:key属性，用每条数据的_id是最佳选择，能提升Vue的渲染性能。
• 如果orDate字段可能存在空值或者非标准格式，记得在处理逻辑里加上判断，避免出现报错。

内容的提问来源于stack exchange，提问作者user9372648