Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div class="obal" id="vue"> <transition name="fade"> <div v-if="!hide" class="oddil vstup"> <textarea v-model="obsah"> </textarea> </div> </transition> <div class="oddil vystup" v-html="nbsp()"></div> <div id="hider"><input v-model="hide" type="checkbox"></div> </div> <script> var app = new Vue({ el: '#vue', data: { obsah: 'Test a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a testTest a test a test', hide: false }, methods: { nbsp: function(){ return this.obsah.replace(/(\b) /g, ' '); } } }); </script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
* { margin: 0; } body { background: #dadada; background-image: linear-gradient(130deg, #dadada 48.39%, #c9c9c9 48.39%, #c9c9c9 50%, #dadada 50%, #dadada 98.39%, #c9c9c9 98.39%, #c9c9c9 100%); background-size: 40.47px 48.23px; } #vue.obal { width: 100%; } #vue :not(.vystup) textarea{ width: 100% !important; min-height: 200px; background: #333; color: #eee; } #vue .oddil { padding: 10px; margin: 5px; word-break: break-word; } #hider { position:fixed; right: 10px; bottom: 5px; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>