Vue计算属性生成的导航中，如何仅为指定项添加HTML元素？

我有一个用计算属性（computed）填充<li>元素的导航，代码如下：

<ul v-for="link in links">
    <li>
      {{ link.name }}
     </li>
</ul>

computed: {
  links(){
    return [
      {
        name: 'Link1',
      },
      {
        name: 'Link2',
      },
      {
        name: 'Link3',
      },
    ]
  }
 }

现在我想给某个导航项（比如作为邮箱链接的Link2）添加额外的HTML元素——在名称旁加一个显示邮件数量的span标签：

<span class="email-counter">{{ messageCount ? `${messageCount.length}` : '' }}</span>

直接把这个span放在<li>里会对所有列表项生效，请问怎么只对Link2应用这个元素？

方法1：通过v-if匹配名称做条件渲染 #

直接在<li>内部用v-if判断当前链接的名称是否为Link2，满足条件才渲染邮件计数器：

<ul v-for="link in links" :key="link.name">
    <li>
      {{ link.name }}
      <!-- 仅当是Link2时显示计数器 -->
      <span v-if="link.name === 'Link2'" class="email-counter">
        {{ messageCount ? `${messageCount.length}` : '' }}
      </span>
     </li>
</ul>

注意：给v-for加上:key属性符合Vue的最佳实践，避免渲染异常。

方法2：给链接对象添加标识字段（更灵活） #

如果后续可能有更多特殊导航项，建议给links里的对象加一个自定义标识（比如isEmail），这样判断逻辑更清晰，也方便扩展：

computed: {
  links(){
    return [
      {
        name: 'Link1',
        isEmail: false
      },
      {
        name: 'Link2',
        isEmail: true
      },
      {
        name: 'Link3',
        isEmail: false
      },
    ]
  }
 }

然后模板里根据标识判断：

<ul v-for="link in links" :key="link.name">
    <li>
      {{ link.name }}
      <span v-if="link.isEmail" class="email-counter">
        {{ messageCount ? `${messageCount.length}` : '' }}
      </span>
     </li>
</ul>

方法3：拆分组件（适合复杂场景） #

如果特殊导航项的逻辑或样式比较复杂，可以把列表项拆成独立组件，根据不同类型渲染不同内容：

<!-- 父组件模板 -->
<ul v-for="link in links" :key="link.name">
  <nav-item :link="link" :message-count="messageCount"></nav-item>
</ul>

// NavItem.vue 子组件
<template>
  <li>
    {{ link.name }}
    <span v-if="link.isEmail" class="email-counter">
      {{ messageCount ? `${messageCount.length}` : '' }}
    </span>
  </li>
</template>

<script>
export default {
  props: ['link', 'messageCount']
}
</script>

这种方式适合导航项有多种不同样式或交互逻辑的场景，代码更易维护。

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