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 == obrazky.length">Author: Spok</p> <test></test> </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; } }, components: { test: { template: '<div v-if="elementVisible"><p>testtesttest</p></div>', data() { return { elementVisible: false }; }, created() { setTimeout(() => (this.elementVisible = true), 2000); } } } });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>