如何使用bootstrap+vue.js实现删除

首先，你需要确保已经引入了Bootstrap和Vue.js，并且创建了一个Vue实例。

接下来，你可以使用Bootstrap的模态框组件来实现删除确认弹窗：

<!-- 删除按钮 -->
<button class="btn btn-danger" @click="showDeleteModal=true">删除</button>

<!-- 删除确认模态框 -->
<div class="modal" tabindex="-1" role="dialog" v-show="showDeleteModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">确认删除？</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="showDeleteModal=false">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>确定要删除这个记录吗？</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="showDeleteModal=false">取消</button>
        <button type="button" class="btn btn-danger" @click="deleteRecord">删除</button>
      </div>
    </div>
  </div>
</div>

在Vue实例中，你需要定义一个`showDeleteModal`变量来控制模态框的显示和隐藏，并在删除按钮的点击事件中将其设置为`true`。同时，你还需要定义一个`deleteRecord`方法，在用户点击删除按钮后执行实际的删除操作，并将`showDeleteModal`设置为`false`以关闭模态框。

new Vue({
  el: '#app',
  data: {
    records: [ /* ... */ ],
    showDeleteModal: false,
    recordToDelete: null
  },
  methods: {
    deleteRecord() {
      // 执行实际的删除操作
      const index = this.records.indexOf(this.recordToDelete);
      if (index !== -1) {
        this.records.splice(index, 1);
      }
      
      // 关闭模态框
      this.showDeleteModal = false;
    }
  }
});

在删除按钮中，你需要将`recordToDelete`变量设置为当前要删除的记录，以便在`deleteRecord`方法中使用。

<button class="btn btn-danger" @click="showDeleteModal=true; recordToDelete=record">删除</button>

现在，当用户点击删除按钮时，将会弹出一个确认模态框，询问用户是否要删除该记录。如果用户点击了“删除”按钮，Vue实例中的`deleteRecord`方法将会被调用，执行实际的删除操作。