3.3. 导航列表

本教程最新版为 2.6,当前版本已放弃维护,请阅读最新版本!

简介

本小节中,我们将在网站的头部显示一个导航列表,并使导航列表可切换。

添加导航列表

打开 src/components/layouts/TheHeader.vue 文件,复制以下代码进行替换:

src/components/layouts/TheHeader.vue

<template>
  <div class="navbar navbar-default topnav">
    <div class="container">
      <div class="navbar-header">
        <a href="/" class="navbar-brand">
          <span class="title">{{ logo.title }}</span>
          <img :src="logo.src" :alt="logo.title">
        </a>
      </div>

      <div id="top-navbar-collapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li v-for="item in navList">
            <a href="#">{{ item }}</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  na...

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
讨论数量: 0

暂无话题~