上述代码在vue里面具体怎么写

在Vue中，可以通过使用组件来实现模态框的功能。以下是一个简单的示例，演示如何在Vue中使用Bootstrap的模态框组件来实现一个模态框对应多个内容的效果。

首先，需要在Vue的模板中创建一个模态框组件，例如：

<template>
  <!-- 模态框 -->
  <div class="modal fade" :id="modalId" tabindex="-1" role="dialog" :aria-labelledby="modalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <!-- 模态框的头部 -->
        <div class="modal-header">
          <h4 class="modal-title" :id="modalLabel">{{ modalTitle }}</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <!-- 模态框的内容 -->
        <div class="modal-body">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    modalId: String, // 模态框的id
    modalLabel: String, // 模态框的aria-labelledby
    modalTitle: String // 模态框的标题
  }
}
</script>

在这个组件中，我们使用了Vue的插槽(slot)来定义模态框的内容。使用插槽可以让组件更加灵活，可以在使用组件时动态地添加内容。

然后，在父组件中，可以使用模态框组件，并动态地改变模态框的内容。例如：

<template>
  <div>
    <!-- 按钮1 -->
    <button @click="showModal('内容1')">按钮1</button>
    <!-- 按钮2 -->
    <button @click="showModal('内容2')">按钮2</button>
    <!-- 模态框 -->
    <modal :modal-id="'myModal'" :modal-label="'myModalLabel'" :modal-title="'模态框标题'">
      {{ modalContent }}
    </modal>
  </div>
</template>

<script>
import Modal from './Modal.vue'

export default {
  components: {
    Modal
  },
  data() {
    return {
      modalContent: '默认内容'
    }
  },
  methods: {
    showModal(content) {
      // 设置新的内容
      this.modalContent = content
      // 显示模态框
      $('#myModal').modal('show')
    }
  }
}
</script>

在这个父组件中，我们使用了模态框组件，并在模板中添加了两个按钮。当点击不同的按钮时，会调用showModal方法，从而动态地改变模态框的内容。同时，模态框组件的各个属性也可以通过父组件的data属性来动态地设置。

需要注意的是，为了使用Bootstrap的模态框组件，需要在Vue的构建环境中引入jQuery和Bootstrap的JavaScript库。可以使用npm安装这些库，然后在Vue的配置文件中进行配置。具体的配置方法可以参考Vue的官方文档。