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"></script> <div id="vue"> <div> {{texty[cisloTextu][cisloTextu2]}} </div> <button @click="dalsi">{{moznosti[cisloTextu][0]}}</button> <button @click="dalsi2">{{moznosti[cisloTextu][1]}}</button> <pre> {{$data.cisloTextu}} {{$data.cisloTextu2}} </pre> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { color: white; background-color: black; font-size: 1.6em; margin-left: 30%; margin-right:30%; } #images { height: 500px; background-size: cover; background-position: center; margin-bottom: 1em; } input { width: 100%; height: 30px; text-align:center; font-size: 1em; margin-top:15px; } #buttonBox { text-align:center; } button{ margin-left: 10px; margin-top: 15px; height: 22px; font-size: 14px; }
CSS
Autoformát
CSS reset
Až na konci
var vue = new Vue({ el: '#vue', data: { cisloTextu: 0, cisloTextu2: 0, texty: [ ['Stojíš na křižovatce', 'Šel jsi doprava'], ['Šel jsi doleva', 'Šel jsi doprava'], ['Pokračoval jsi doleva', 'nakonec jsi se vrátil doprava'] ], moznosti: [ ['Jít doleva', 'Jít doprava'], ['pokračovat v cestě do leva', 'Vrátit se a jít do prava'], ['Pokračovat v cestě doprava', 'vrátit se a jít doleva'] ] }, methods: { dalsi: function() { this.cisloTextu += 1 if (this.cisloTextu === 3) { this.cisloTextu = 0 } }, dalsi2: function() { this.cisloTextu2 += 1 this.cisloTextu += 1 if (this.cisloTextu2 === 2) { this.cisloTextu2 = 0 } if (this.cisloTextu === 3) { this.cisloTextu = 0 } } } })
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>