求问一个vue相关的知识点

Question

我写了一个模块，功能是左滑删除

components/swiper-btn.vue

  <v-touch class="list-delete" @swipeleft="onSwipeLeft" @swiperight="onSwipeRight"
           :class="isSlide?'slide-in':'slide-out'">
    <slot></slot>
    <div class="opper">
      <div class="btn-delete" @click="onBtnDel(listIndex)">
        <span class="btn-inner">删除</span>
      </div>
    </div>
  </v-touch>

现在我有个列表要使用这个模块，有的列表单项的内容是要这个功能，有的又不需要

  <swipe-btn v-if="tabIndex===1">
    <div>列表单项的内容</div>
  </swipe-btn>
  <div v-else>
    <div>列表单项的内容</div>
  </div>

我的问题就是，因为上面代码中，“列表单项的内容”中有很多嵌套，两大段代码一模一样，有没有什么办法合并起来，只写一遍？

Answer 1

https://cn.vuejs.org/v2/guide...

Answer 2

可以把if else 封装到swiper-btn.vue 里面去吗,然后改一个更适合的名字吗