Vue.js Bootstrap Modal 通过Vue方法隐藏

在本文中，我们将介绍如何使用Vue.js和Bootstrap来隐藏一个模态框。模态框是一个常见的UI组件，可以弹出一层覆盖整个页面，用于显示重要的信息、进行交互或展示内容。

什么是Vue.js和Bootstrap

Vue.js是一个用于构建用户界面的JavaScript框架。它的核心思想是通过数据驱动视图，将应用程序的状态自动响应到DOM中。Vue.js有着简单、灵活的语法，易于上手和学习，并且具有很好的生态系统和社区支持。

Bootstrap是一个流行的前端开发框架，为Web开发人员提供了丰富的CSS样式和JavaScript组件。其中一个常见的组件就是模态框，用于创建弹出窗口和对话框。

使用Vue.js和Bootstrap创建一个模态框

要使用Vue.js和Bootstrap创建一个模态框，首先需要引入Vue.js和Bootstrap的相关文件。可以通过CDN或本地文件引入。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue.js Bootstrap Modal Hide</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app">
      <button @click="showModal" class="btn btn-primary">显示模态框</button>
      <div class="modal" :class="{ 'show': showModalFlag }">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">模态框标题</h5>
              <button type="button" class="btn-close" @click="hideModal"></button>
            </div>
            <div class="modal-body">
              模态框内容
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" @click="hideModal">关闭</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          showModalFlag: false
        },
        methods: {
          showModal() {
            this.showModalFlag = true;
          },
          hideModal() {
            this.showModalFlag = false;
          }
        }
      });
    </script>
  </body>
</html>

在上面的示例代码中，我们创建了一个Vue实例，并将其挂载到id为”app”的DOM元素上。showModalFlag是一个用于控制模态框显示的数据属性，默认值为false。

点击按钮时，调用showModal方法会将showModalFlag设置为true，从而显示模态框。模态框的显示状态通过:class绑定实现，当showModalFlag为true时，添加”show”类名到模态框的class属性中。

模态框的关闭按钮和关闭按钮事件同样使用了hideModal方法，将showModalFlag设置为false，模态框随即隐藏。