Vue2 Bootstrap 弹出层代码示例 - 纯源码

<template>
  <div>
    <button class='btn btn-primary' @click='showModal'>打开弹出层</button>
    <div class='modal' tabindex='-1' role='dialog' :class='{ 'show': showModalFlag }'>
      <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='hideModal'>
              <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='hideModal'>关闭</button>
            <button type='button' class='btn btn-primary'>保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showModalFlag: false
    }
  },
  methods: {
    showModal() {
      this.showModalFlag = true
    },
    hideModal() {
      this.showModalFlag = false
    }
  }
}
</script>