JSFiddle - React, Tailwind, and code Playground

by eagle sum

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<!-- 彈跳區域 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>

JavaScript

Vue.component('modal', {
        template: '#modal-template'
    })

    new Vue({
        el: '#show',
        data: {
            show: false
        }
    })