你可以使用v-if来检查是否有正确的链接：

new Vue({
  el: '#demo',
  data() {
    return {
      messageCount: {length: 999}
    }
  },
  computed: {
    links(){
      return [{ name: 'Link1', }, { name: 'Link2', }, { name: 'Link3', },]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul v-for="link in links" :key="link.name">
    <li>
      {{ link.name }}
      <span  v-if="link.name === 'Link2'" class="email-counter">{{ messageCount ? `${messageCount.length}` : '' }}</span>
    </li>
  </ul>
</div>

当我遇到这样的事情时，我总是发现把事情抽象一点，让父母保持整洁会更好。因此，不要在模板中添加大量逻辑，而是尽量将尽可能多的逻辑添加到原始列表中，并添加其他组件。
在这种情况下，我可能会创建一个组件来显示单个链接，并执行类似于下面的操作。它使一切都更干净，并使未来更容易做出进一步的更改。
在这个例子中，我使用了Vue 3和脚本设置，因为这是我的默认设置，但在Vue 2中的想法是一样的。

// navigation-menu.vue
<template>
    <nav>
        <ul>
            <navigation-item v-for="link in links" v-bind="link" />
        </ul>
    </nav>
</template>

<script setup>
// ... Import navigation-item

const links = [
    {
        label: 'Link 1',
    },
    {
        label: 'Link 2',
        count: 5,
    },
    {
        label: 'Link 3',
    },
];
</script>

// navigation-item.vue
<template>
    <li>
        {{ label }}

        <span v-if="count">{{ count }}</span>
    </li>
</template>

<script setup>
defineProps({
    /**
     * The label to display on the menu item.
     */
    label: {
        type: String,
        required: true,
    },

    /**
     * A notification-style count to display beside the menu item.
     */
    count: {
        type: Number,
        default: null,
    },
});
</script>