Vue中如何基于v-if条件动态修改a标签的显示文本

你可以通过判断managedAsset.alertDates数组的长度来动态切换链接文本，修改后的代码如下：

完整修改后代码 #

<template>
  <div class="not-as-small form-text mb-1">
    <a
      href="#"
      data-tc-add-alert-date-btn
      @click.prevent="addAlert"
      class="text-cyan"
    >
      &plus; 
      <span v-if="managedAsset.alertDates.length === 0">Add Alert</span>
      <span v-else>Add another alert</span>
    </a>
  </div>
</template>

<script>
export default {
  // 其他原有配置项保留即可
  methods: {
    addAlert() {
      this.managedAsset.alertDates.push({});
    },
  }
}
</script>

逻辑说明 #

• managedAsset.alertDates是你存储告警列表的数组，每添加一条告警数组长度就会+1
• 当数组长度为0时，说明还没有添加过任何告警，此时显示Add Alert
• 当数组长度大于0时，说明已经添加过至少1条告警，此时显示Add another alert
• 注意你原有代码里的方法配置项拼写错误，Vue的方法配置项应为复数methods，否则点击事件不会生效

更简洁的实现方式（可选） #

如果你不想新增两个span标签，也可以直接用三元表达式实现同样效果，不需要使用v-if：

+ {{ managedAsset.alertDates.length === 0 ? 'Add Alert' : 'Add another alert' }}

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