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="app"> <div> <img v-on:click="ukaz" src="http://i.imgur.com/vYdoAKu.jpg" > <p v-if="viditelnost == true"> Tak jak by se to dělat mělo </p> </div> <div class="prepinac" v-on:click="e => e.target.classList.toggle('prepnuto')"> <img src="http://i.imgur.com/vYdoAKu.jpg" > <p v-if=""> Řešení pomocí třídy a css</p> </div> <div> <img v-on:click="e => e.target.remove()" src="http://i.imgur.com/vYdoAKu.jpg" > <p v-if="!~img"> Nefunguje </p> <!-- this.parentNode.firstChild !== img --> </div> <!-- <pre> {{$data}} </pre>--> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
img { width: 100px; } p { background: grey; width: 100px; height: 75.5px; } .prepinac { background: red; margin-bottom:5px; } .prepinac p{ display: none; } .prepnuto img{ display: none; } .prepnuto p { display: block; }
CSS
Autoformát
CSS reset
Až na konci
new Vue({ el: '#app', /* data: { viditelnost : false }, methods : { ukaz: function() { if(this.viditelnost === false) { this.viditelnost = true; } else { this.viditelnost = false } } }*/ })
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>