html如下：<div id="app"> <div class="tab"> <!-- tab栏 --> <ul> <li class="active">apple</li> <li class="">orange</li> <li class="">lemon</li> </ul> <!-- 对应显示的图片 --> <div class="current">< img src="apple.png"></div> <div class="">< img src="or.png"></div> <div class="">< img src="ning.png"></div> </div> </div>，我想使用vue实现一个选项卡切换效果，图片显隐使用v－if方法

可以使用以下代码实现选项卡切换效果，图片显隐使用v-if方法：

<template>
  <div id="app">
    <div class="tab">
      <!--  tab栏  -->
      <ul>
        <li v-for="(tab, index) in tabs" :key="index" :class="{active: activeIndex === index}" @click="activeIndex = index">{{ tab }}</li>
      </ul>
      <!--  对应显示的图片 -->
      <div v-for="(tab, index) in tabs" :key="index" class="current" v-if="activeIndex === index"><img :src="getImageSrc(tab)"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      tabs: ['apple', 'orange', 'lemon']
    }
  },
  methods: {
    getImageSrc(tab) {
      return `${tab}.png`
    }
  }
}
</script>

在上面的代码中，我们使用了v-for指令来循环渲染选项卡和对应的图片，使用:class绑定class属性来实现选中状态的切换，使用@click绑定点击事件来切换选中状态。同时，使用v-if指令来控制图片的显隐，通过getImageSrc方法来动态获取图片的路径。