Vue.js 3 i18n是否支持在翻译键中编写条件语句？

Vue.js 3 配套的 vue-i18n@9+ 完全支持在翻译键中编写条件逻辑，无需依赖复数化，针对不同复杂度的场景有两种常用实现方式：

1. 内联条件块语法 #

对于简单的存在性判断（比如你示例中的非零值渲染），可以直接在翻译字符串中使用 vue-i18n 内置的条件块语法：

简洁写法（自动判断值是否存在/非空） #

{
  "TIME": {
    "COMPRESSED_FORMAT": "{d}{d}d{/d} {h}{h}h{/h} {m}{m}m{/m} {s}{s}s{/s}"
  }
}

当传入的d/h/m/s参数为非零、非空值时，对应的部分会自动渲染；若参数不存在或为空，则跳过该段内容。

显式条件判断写法 #

如果需要更明确的逻辑判断（比如大于某个值才显示），可以用{#if}块语法：

{
  "TIME": {
    "COMPRESSED_FORMAT": "{#if d > 0}{d}d {/if}{#if h > 0}{h}h {/if}{#if m > 0}{m}m {/if}{#if s > 0}{s}s{/if}"
  }
}

2. 函数式翻译 #

针对复杂逻辑（比如多分支判断、字符串拼接规则复杂），可以直接将翻译值定义为函数，在函数内实现完整逻辑：

// i18n 配置中的 messages 定义
const messages = {
  zh: {
    TIME: {
      COMPRESSED_FORMAT: ({ d, h, m, s }) => {
        const parts = [];
        d && parts.push(`${d}天`);
        h && parts.push(`${h}小时`);
        m && parts.push(`${m}分钟`);
        s && parts.push(`${s}秒`);
        return parts.join(' ');
      }
    }
  }
};

在组件中调用时，直接传入参数即可：

<template>
  <p>{{ $t('TIME.COMPRESSED_FORMAT', { d: 2, h: 3 }) }}</p>
</template>

无论是使用选项式API还是组合式API（useI18n），以上两种方式都能正常工作。复杂逻辑优先推荐函数式翻译，可读性和维护性更强。

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