v-for循环遍历(栏目代码)

template

 <template v-if="(filter || {}).word">
      <li
        v-for="(menu, i) in (value.menus || []).filter((temp) =>
          temp.menuName.includes(filter.word)&&(temp.meta||{}).position
        )"
        :key="`menu${i}`"
      >
        <!-- :class="menu.hasChildren ? 'has-arrow' : ''" -->
        <a href="javascript:;" @click="handelChangeMenu(menu)">
          <div class="parent-icon">
            <i :class="`${(menu.meta || {}).icon || 'bx bx-home-circle'}`"></i>
          </div>
          <div class="menu-title">{{ menu.menuName }}</div>
        </a>
      </li>
    </template>

`${(menu.meta || {}).icon || ‘bx bx-home-circle’}

 <li v-for="(menu, i) in value.quick || []" :key="`quick${i}`">
            <a
              class="dropdown-item"
              href="javascript:;"
              @click="handelChangeMenu(menu)"
            >
             <i :class="`${(menu.meta || {}).icon || 'bx bx-home-circle'}`"
              /><span>{{ (menu.meta || {}).title || menu.menuName }}</span>
            </a>
          </li>

退出 meta.icon

 <li>
            <a
              class="dropdown-item"
              href="javascript:;"
              @click="handleLoadMenuLogout"
              ><i class="bx bx-log-out-circle"></i><span>{{ ((value.logout||{}).meta || {}).title || (value.logout||{}).menuName||'退出' }}</span></a
            >
          </li>

专题栏目 meta.bgicon meta.icon

 <li class="nav-item dropdown dropdown-large">
            <a
              class="nav-link dropdown-toggle dropdown-toggle-nocaret"
              href="#"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <i class="bx bx-category"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end">
              <div class="row row-cols-3 g-3 p-3">
                <template v-if="(value.topic || []).length > 0">                 
                    <div
                     v-for="(menu, i) in (value.topic || [])" :key="`quick${i}`"
                      class="col text-center"
                      @click="handelChangeMenu(menu)"
                    >
                      <div
                        :class="`app-box mx-auto text-white ${
                          (menu.meta || {}).bgicon || 'bg-gradient-cosmic'
                        }`"
                      >
                        <i
                          :class="`${(menu.meta || {}).icon || 'bx bx-group'}`"
                        ></i>
                      </div>
                      <div class="app-title">
                        {{ (menu.meta || {}).title || menu.menuName }}
                      </div>
                    </div>
                </template>
                 <div class="col text-center" v-else>
                  <div class="app-box mx-auto bg-gradient-blues text-dark">
                    <i class="bx bx-bell-off"></i>
                  </div>
                  <div class="app-title">暂无栏目</div>
                </div>
              </div>
            </div>
          </li>

<div class="col text-center">
                  <div class="app-box mx-auto bg-gradient-cosmic text-white">
                    <i class="bx bx-group"></i>
                  </div>
                  <div class="app-title">团队管理</div>
                </div>
                <div class="col text-center">
                  <div class="app-box mx-auto bg-gradient-burning text-white">
                    <i class="bx bx-atom"></i>
                  </div>
                  <div class="app-title">项目管理</div>
                </div>
                <div class="col text-center">
                  <div class="app-box mx-auto bg-gradient-lush text-white">
                    <i class="bx bx-shield"></i>
                  </div>
                  <div class="app-title">任务调度</div>
                </div>
                <div class="col text-center">
                  <div class="app-box mx-auto bg-gradient-kyoto text-dark">
                    <i class="bx bx-notification"></i>
                  </div>
                  <div class="app-title">反馈建议</div>
                </div>
                <div class="col text-center">
                  <div class="app-box mx-auto bg-gradient-blues text-dark">
                    <i class="bx bx-file"></i>
                  </div>
                  <div class="app-title">文件管理</div>
                </div>
                <div class="col text-center">
                  <div class="app-box mx-auto bg-gradient-moonlit text-white">
                    <i class="bx bx-filter-alt"></i>
                  </div>
                  <div class="app-title">告警信息</div>
                </div>