<div id="app">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" @click="openModal()">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{ text }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" @click="closeModal" @click="closeModal()">Save changes</button>
</div>
</div>
</div>
</div>
</div>
//首先我們在上方的button上寫入V-on:click="penModal() "指令，把modal打開
//取dom元素
//1.bootstrap modal實體
let myModal = "";
Vue.createApp({
data() {
return {
text: "棒棒"
};
},
methods: {
openModal() {
//2. 套用modal.show()方法
myModal.show();
},
closeModal() {
myModal.hide();
}
},
mounted() {
//可以抓到dom元素
myModal = new bootstrap.Modal(document.querySelector("#modal")); // 實體化
}
}).mount("#app");
