有没有办法根据条件将父元素定义为可选元素,但始终在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相关问答推荐

如何使用composition api v-model Select 框获取其他JSON 值?

有没有办法将react 键作为值传递给由 v-for 创建的 v-model

Vue Datepicker 不会在渲染时显示默认日期

从数据库中删除后,Vue.js $remove 不删除元素

如何将对象作为props传递并让组件更新子对象

Vue:需要禁用页面上的所有输入

如何在 vue.js 2 的其他组件中调用方法?

Laravel Vue - 如何让 vue 在公共文件夹中查找图像

如何为使用 Vuex store的 Vue 表单组件编写 Jest 单元测试?

在 vuejs 中的图像中包含 router-link 标记

Django Rest 框架、CSRF 和 Vue.js

React.js 是否有类似 Vue.js

ionic - `slot` 属性已被弃用 - eslint-plugin-vue

如何从 vue.js 捕获 Jquery 事件

输入文件 Select 事件在 Select 同一文件时未触发

Vue3在按钮单击时以编程方式创建组件实例

Vue 2.0 设置路由 - 不要使用new来产生副作用

您正在运行 Vue 的 esm-bundler 构建

在鼠标悬停时动态添加和删除类

Apollo 客户端在向服务器发送Mutations 时返回400(错误请求)错误