代码之家 › 专栏 › 技术社区 › sandrina-p

动态更改Vue JS 2上的父元素标记

vue-component vuejs2 javascript

sandrina-p · 技术社区 · 6 年前

如何根据prop条件在不同父元素之间切换,使其内容保持不变?

示例:如果 Item 有 isRouter 道具,它渲染 router-link 使用所需的属性,否则它将呈现一个简单的 li 元素。

/* Item.vue */

<router-link v-if="isRouter" tag="li" :to="to" active-class="is-active">
<li v-else>
    /* some html */
    <slot></slot>
    /* more html */
</li>
</router-link>

// View.vue
<list>
  <item isRouter to="/new">
    Breaking News
  </item>
  <item>
    Orange
  </item>
</list>

这可以吗?你建议我采用什么方法?

1 回复 | 直到 6 年前

obermillerk 6 年前

好吧,我真的找到了做你想做的事的方法!

使用Vue component 标签和 vbind:is 财产(或 :is 速记)。

<component :is="isRouter ? 'router-link' : 'li'" :to="to">
  <!-- repeated content -->
  <slot></slot>
  <!-- more repeated content -->
</component>

这个 是 如果需要,可以将属性委托给计算属性。并且要知道你想要传递给 router-link 需要为 成分 标记,但如果您不想在 li .

这就是我找到它的地方: https://vuejs.org/v2/guide/components.html#Dynamic-Components
如果您需要进一步阅读,这里还有一个链接指向有关动态组件的更多详细信息。

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

2 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前