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实现一个选项卡切换效果，图片出现的位置一致

你可以使用 Vue.js 的 v-bind 和 v-show 指令来实现选项卡切换效果，代码如下：

<div id="app">
  <div class="tab">
    <!-- tab栏 -->
    <ul>
      <li :class="{ 'active': activeTab === 'apple' }" @click="activeTab = 'apple'">apple</li>
      <li :class="{ 'active': activeTab === 'orange' }" @click="activeTab = 'orange'">orange</li>
      <li :class="{ 'active': activeTab === 'lemon' }" @click="activeTab = 'lemon'">lemon</li>
    </ul>
    <!-- 对应显示的图片 -->
    <div class="current" v-show="activeTab === 'apple'"><img src="apple.png"></div>
    <div class="" v-show="activeTab === 'orange'"><img src="orange.png"></div>
    <div class="" v-show="activeTab === 'lemon'"><img src="lemon.png"></div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      activeTab: 'apple'
    }
  })
</script>

在上面的代码中，我们使用了 v-bind 指令来绑定 li 标签的 class 属性，根据 activeTab 的值来添加或移除 active 样式。而 v-show 指令则是根据 activeTab 的值来显示或隐藏对应的图片。同时，我们也使用了 @click 指令来监听 li 标签的点击事件，改变 activeTab 的值来实现选项卡的切换效果。