我们可以动态更改 VueJS 中的 HTML 标签吗？答案

【问题标题】：Can we change HTML tag in VueJS dynamically?我们可以动态更改 VueJS 中的 HTML 标签吗？
【发布时间】：2020-08-05 08:06:20
【问题描述】：

我有这样的代码：

<TabItem name="Font Family" :selected="true">
   <typography-font />
</TabItem>
<TabItem name="Typescale">
   <typescale />
</TabItem>
<TabItem name="Usage">
   <typography-usage />
</TabItem> .... and more <TabItem>

如果我想像这样使用 v-for 使其循环，是否可以动态替换 HTML 标签？

<tabItem v-for="directlink in links"> 
  <{{ directLink }}/> 
<tabItem>

【问题讨论】：

嗨。你能改写一下这个问题吗？不清楚你在问什么（抱歉）
@Dejan.S 所以我想使用计算或其他方式动态更改 TabItem 内的标签，以便使用 v-for 值显示相应的页面。这可能吗？

标签： javascript html css vue.js dynamic

【解决方案1】：

可以使用Vue提供的动态组件<component :is="componentName" />。

查看您当前的设置，您可以使用对象数组来呈现您想要的项目。

例子：

// template
<TabItem v-for="(directlink, index) in links" :key="index" :name="directlink.name">
  <component :is="directlink.component"/>
</TabItem>

// script
data() {
  return {
    links: [
      {
        name: 'Font Family',
        component: 'typography-font'
      },
      {
        name: 'Typescale',
        component: 'typescale'
      },
      // ... etc. You could also load this data from a .json file.
    ]
  }
}