mint-ui坑爹指南(vue)—— tabbar切换，显示图片切换的办法

最新推荐文章于 2022-10-26 11:42:21 发布

人间草木96

最新推荐文章于 2022-10-26 11:42:21 发布

阅读量1.4k

点赞数

分类专栏： vue mint-ui

本文链接：https://blog.csdn.net/qq_43258252/article/details/90901974

版权

本文介绍了在Vue项目中使用mint-ui的tabbar组件时遇到的问题及解决方案，特别是如何在切换tab时实现对应的图片切换，提供了详细的步骤和代码示例。

摘要由CSDN通过智能技术生成

<template>
  <div class="mainIndex" fixed>
    <router-view></router-view>
    <!-- 路由切换方案2 -->
    <mt-tabbar>
      <mt-tab-item v-for="(v,index) in tabBar" :id="v.txt" :key="index">
        <div @click="jump(index)">
          <img slot="icon" :src="v.src" v-if="selTxt != v.txt">
          <img slot="icon" :src="v.srcSelected" v-if="selTxt === v.txt">
          <p :style="{'color': (selTxt==v.txt ? '#3C86F1':'#999999')}">{
  {v.txt}}</p>
        </div>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'mainIndex',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'