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 id="vueap"> <div class="prispevek1"> <img v-if="soucasneCislo <= 4" :src="obrazky[soucasneCislo]" v-on:click="dalsi"> <p class="description" v-on:click="resetovat" v-if="soucasneCislo == 5">Author: Spok</p> </div> <hr> <pre> {{$data}} </pre> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
p { background: #333; color: white; width:330px; padding:85px 50px; text-align: center; vertical-align: middle; } img { max-height: 200px; }
CSS
Autoformát
CSS reset
Až na konci
new Vue({ el: '#vueap', data: { obrazky: ['http://i.imgur.com/vYdoAKu.jpg', 'http://i.imgur.com/PUD9HQL.jpg', 'http://i.imgur.com/Lfv18Sb.jpg', 'http://i.imgur.com/tmVJtna.jpg', 'http://i.imgur.com/ZfFAkWZ.jpg'], soucasneCislo: 0, }, methods: { dalsi: function() { this.soucasneCislo += 1; }, resetovat: function(){ this.soucasneCislo = 0; } } });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>