使用mint-ui Navbar上使用点击事件

最新推荐文章于 2025-06-03 20:48:04 发布

银物

最新推荐文章于 2025-06-03 20:48:04 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

文章标签： mint-ui vue js

本文链接：https://blog.youkuaiyun.com/liuzicongg/article/details/87087254

本文探讨了在Mint-UI的Navbar组件中如何正确地添加点击事件，通过实例展示了将事件监听器添加到span元素上的有效方法。

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

使用mint-ui Navbar上使用点击事件

先贴下官方mint-ui Navbar 例子:

<mt-navbar v-model="selected">
  <mt-tab-item id="1">选项一</mt-tab-item>
  <mt-tab-item id="2">选项二</mt-tab-item>
  <mt-tab-item id="3">选项三</mt-tab-item>
</mt-navbar>
<!-- tab-container -->
<mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
    <mt-cell v-for="n in 10" :title="'内容 ' + n" />
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
    <mt-cell v-for="n in 4" :title="'测试 ' + n" />
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
    <mt-cell v-for="n in 6" :title="'选项 ' + n" />
  </mt-tab-container-item>
</mt-tab-container>

怎样添加点击事件呢

<mt-navbar v-model="selected" @click="直接添加点击事件无效">
  <mt-tab-item id="1" @click="直接添加点击事件无效">选项一</mt-tab-item>
  <mt-tab-item id="2">选项二</mt-tab-item>
  <mt-tab-item id="3">选项三</mt-tab-item>
</mt-navbar>

我是这样加的…

<mt-navbar v-model="selected">
  <mt-tab-item id="1"> <span @click="这样就可以了">选项一</span> </mt-tab-item>
  <mt-tab-item id="2">选项二</mt-tab-item>
  <mt-tab-item id="3">选项三</mt-tab-item>
</mt-navbar>

还有更好的办法吗…求告知