有没有办法根据条件将父元素定义为可选元素,但始终在Vue中显示其子元素.js?

例如:

<a :href="link">Some text</a>

我想实现的是以下DOM,具体取决于link

<a href="somelink">Some text</a> <!-- when link is truthy -->
Some text                        <!-- when link is falsy -->

Potential solutions

  • 复制子元素们:

    <a :href="link" v-if="link">Some text</a>
    <template v-if="!link">Some text</template>
    

    但这并不是一个好的解决方案,尤其是因为可能有更多的内容,而不仅仅是一个简单的文本.

  • 编写自己的组件,根据某些属性执行逻辑.但这似乎有些过分,而且对于不同类型的元素类型或属性也必须足够灵活.

由于我不喜欢这两种方法中的任何一种,我想知道是否没有更简单的解决方案.有什么 idea 吗?

推荐答案

经过进一步的挖掘,我找到了一种可行的方法,实际上非常简单.当你不能直接将组件绑定到HTML元素时,它会使用is special attribute.

<a :href="link" :is="link ? 'a' : 'span'">Some text</a>

这将导致以下任一情况:

<a href="somelink">Some text</a> <!-- when link is truthy -->
<span>Some text</span>           <!-- when link is falsy -->

Vue.js相关问答推荐

当props 的值改变时如何更新类'

如何用其他组件编译Vue模板?

Nuxt 3 I18N浏览器检测不起作用

使用内部方法创建计算(computed)属性是否合法?

在 v-for 中定义变量有什么问题吗?

带有参数的 Vuex 映射 Getter - 缓存?

是否可以让 html-webpack-plugin 从 css 生成