zoukankan      html  css  js  c++  java
  • 【vue】导航栏封装

    Header.vue组件

    <template>
      <div>
        <div class="menu">
          <div class="container">
            <nav class="navbar" role="navigation">
              <div class="navbar-header">
                <button
                  type="button"
                  class="navbar-toggle"
                  data-toggle="collapse"
                  data-target=".navbar-ex1-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
    
                <router-link class="navbar-brand visible-xs" :to="{ name: 'Home' }"
                  ><img
                    src="../assets/images/logo.png"
                    alt=""
                    class="img-responsive"
                  />大学生心理健康中心</router-link
                >
              </div>
    
              <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                  <li v-for="(item, index) in nav" :key="index">
                    <router-link :to="{ name: item.path }" :class="[item.title==activeTitle?'active':'']">{{
                      item.title
                    }}</router-link>
                  </li>
                </ul>
    
                <form class="navbar-form navbar-right" role="search">
                  <div class="form-group">
                    <input
                      type="text"
                      class="form-control"
                      placeholder="请输入查询的内容"
                    />
                  </div>
                  <button type="submit" class="btn btn-default">查询</button>
                </form>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "",
      props:{
         activeTitle:{
             type:String
         }
      },
      data() {
        return {
          nav: [
            { path: "Home", title: "首页" },
            { path: "jianjie", title: "中心简介" },
            { path: "news", title: "新闻动态" },
            { path: "xlzl", title: "心理专栏" },
            { path: "xljt", title: "心理鸡汤" },
            { path: "xlzy", title: "心理资源" },
            { path: "leaveWord", title: "留言板" },
          ],
        };
      },
    };
    </script>
    

    在首页中注册并使用

  • 相关阅读:
    EntityFramework 数据库的迁移
    free之后将指针置为NULL
    结构体对齐及#pragma详细解释
    大端小端
    TCP封包解包---如有错误,请纠正!
    堆栈----好久没有更新了
    附近点搜索
    LRU Cache
    电商的秒杀和抢购
    搜索关键词智能提示suggestion
  • 原文地址:https://www.cnblogs.com/hellocd/p/14266624.html
Copyright © 2011-2022 走看看