I wrote a module whose function is to slide left to delete

components/swiper-btn.vue

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

Now I have a list that needs to use this module. Some of the individual items in the list require this function, and some do not need it.

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

My question is, because in the above code, there are many nests in the "contents of single items in the list", and the two large pieces of code are exactly the same. Is there any way to merge them and write them only once?