彈跳視窗
28.php
<html>
<head>
<meta charset="UTF-8">
<title>彈跳視窗</title>
</head>
<body>
<!-- 彈跳區域 CSS自行寫 -->
<template id="modal-template">
<div>
<div>eagle flying</div>
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</div>
</template>
<div id="show">
<button id="show-modal" @click="show = true">Show Modal</button>
<modal v-if="show" @close="show = false"></modal>
</div>
</body>
<script src="vue.js"></script>
<script>
Vue.component('modal', {
template: '#modal-template'
})
new Vue({
el: '#show',
data: {
show: false
}
})
</script>
</html>
感謝分享
補充 new Vue() 是 Vue 2 語法，
Vue 3 用 Vue.createApp() 取代 new Vue()
https://book.vue.tw/appendix/migration.html#%E5%85%83%E4%BB%B6%E5%AF%A6%E9%AB%94%E5%BB%BA%E7%AB%8B
Vue 2 support will end on Dec 31, 2023. Learn more about Vue 2 Extended LTS.
The Benefits of the New Vue 3 App Initialization Code
iThome鐵人賽
看影片追技術