Question

我需要根据<button>属性决定要创建<a>还是href（检查是否转发）。我无法在此处发布原始代码，因为其中使用了许多自制组件，因此没有任何意义，但其中的示例将如下所示：

<a v-if="href" class="btn" v-on:click="clicked">
        //bunch of repetitive code
        @{{button_label}}
</a>
<button v-else class="btn" v-on:click="clicked">
        //bunch of repetitive code
        @{{button_label}}
</button>

是否有办法只在两个<a>或<button>标签之间编写所有代码一次，并检查是否应该在代码开头创建这两个标签中的每一个？（一种方法是创建一个JS函数，该函数将在单击按钮时触发，并返回href（如果存在），但是我不允许这样做，所以这就是为什么我明确询问是否可以这样做这是HTML代码的一部分）

我的想法是这样做：

<a v-if="href" class="btn" v-on:click="clicked">
<button v-else class="btn" v-on:click="clicked">
    //bunch of repetitive code
        @{{button_label}}
</a v-if="href">
</button v-else>

但我不确定这是否正确。

Answer 1

在这种情况下，您可以使用dynamic component

<component 
  :is="href ? 'a' : 'button'" 
  :href="href">
  // bunch of code
</component>

这使您可以根据条件使用其他组件（或元素）。

使用更少的代码在HTML中编写v-if条件

1 个答案: