vue使用Mint UI的Navbar时默认展示项

最新推荐文章于 2025-06-30 20:16:00 发布

前端小狮

最新推荐文章于 2025-06-30 20:16:00 发布

阅读量4.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue Mint UI Navbar

本文链接：https://blog.youkuaiyun.com/m0_37885651/article/details/80627450

vue 专栏收录该内容

11 篇文章

订阅专栏

本文解决了一个关于MintUI的Navbar组件默认选中项不显示的问题。通过将初始化数据中的数字类型更改为字符串类型，成功实现了默认项的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到的问题：Mint UI的Navbar时,默认展示的项，直接copy的Mint UI组件库代码，初始化数据的时候给 selected初始值为数值型1，然后页面怎么都不能默认展示，怎么试都不灵，后查了很多，才知道，这要初始个字符串1；希望看到的人少走弯；

<template>
    <div class="nav-wrap">
        <mt-navbar v-model="selected">
          <mt-tab-item id="1">option A</mt-tab-item>
          <mt-tab-item id="2">option B</mt-tab-item>
          <mt-tab-item id="3">option C</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <mt-cell v-for="n in 10" :title="'content ' + n" />
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <mt-cell v-for="n in 4" :title="'content ' + n" />
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <mt-cell v-for="n in 6" :title="'content ' + n" />
          </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>

    export default {
      data () {
        return{
            selected:'1',//注意就是这里，默认选字符串数字，不然初始没展示；
        }
      }
    }
</script>
<style>

</style>