在Vue2中使用bootstrap模态框，激活时一闪而过

文章讲述了在Vue2应用中，使用Bootstrap的模态框(data-toggle,data-target)会导致一闪而过的问题，通过将数据属性转换为@click事件绑定，结合自定义的openModal和closeModal方法成功解决了这个问题。另外提到，在Vue2中直接通过npm导入Bootstrap3可能某些功能受限，而通过HTML的link标签引入bootstrap3和jQuery则能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

使用bootstrap官方给的方法，会一闪而过，即通过以下属性控制：

data-toggle="modal"

data-target="#myModal"

data-dismiss="modal"

将data-???换成用@click控制，问题解决：D

（为什么可以解决？）

下面是修改后的代码

下面是模板<template>中的内容

<!-- 模态控制 -->
            <button type="button" class="btn btn-info" @click="openModal">测试说明</button>
            <!-- 模态 -->
            <div id="myModal" class="modal fade" role="dialog">
              <div class="modal-dialog">
                <!-- 模态内容-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" @click="closeModal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                  </div>
                  <div class="modal-body">
                    <p>Some text in the modal.</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" @click="closeModal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>

下面是脚本<script>中的内容

methods:{

      openModal(){
        this.$('#myModal').modal("show")
      },
      closeModal(){
        this.$('#myModal').modal("hide")
      }
}

下面是完整代码，不建议看

<template>
  <div>


          <!-- 模态控制 -->
            <button type="button" class="btn btn-info" @click="openModal">测试说明</button>
            <!-- 模态 -->
            <div id="myModal" class="modal fade" role="dialog">
              <div class="modal-dialog">
                <!-- 模态内容-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" @click="closeModal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                  </div>
                  <div class="modal-body">
                    <p>Some text in the modal.</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" @click="closeModal">Close</button>
                  </div>
                </div>
       
        
     
  </div>
</template>
<script>

export default {
    name:'MuBan',
    methods:{

      openModal(){
        this.$('#myModal').modal("show")
      },
      closeModal(){
        this.$('#myModal').modal("hide")
      }
   }
}
</script>