Question

我有一个名为head.vue

的组件

 <b-navbar toggleable="lg" type="dark">

    <b-navbar-brand href="#"><img src="logo.png" class='logo'/></b-navbar-brand>

  </b-navbar>

我想做的是仅在某些页面上显示徽标，例如（首页，关于，隐私），如果不是首页我要显示标题，请参见示例：

<b-navbar toggleable="lg" type="dark">

        <b-navbar-brand href="#"><h1>Lorem Ipsum</h1></b-navbar-brand>

      </b-navbar>

我该如何使用条件渲染呢？我可以使用组件执行此操作，但想知道是否可以在同一组件上执行。例如：

 <b-navbar toggleable="lg" type="dark">
        <b-navbar-brand href="#" v-if="homepage"><h1>Lorem Ipsum</h1></b-navbar-brand>
        <b-navbar-brand href="#" v-else><h1>Lorem Ipsum</h1></b-navbar-brand>
</b-navbar>

Answer 1

在要显示徽标的路线上添加一些额外的数据，例如

df.groupby(['Product','Year']).value.sum().loc[lambda p: p > 10].to_frame()

然后在您的routes: [{ path: '/homepage', component: HomePage, meta: { showLogo: true } }, { path: '/about', component: About, meta: { showLogo: true } }, { path: '/some-other-page', component: SomeOtherComponent // no meta required here }]组件中，只需使用

head

<b-navbar toggleable="lg" type="dark">
  <b-navbar-brand href="#">
    <img v-if="showLogo" src="logo.png" class='logo'/>
    <h1 v-else>Lorem Ipsum</h1>
  </b-navbar-brand>
</b-navbar>

请参见https://router.vuejs.org/guide/advanced/meta.html

由url定义的Vue JS条件渲染？

1 个答案: