Vue.js Eğitimi 03-38

v-if / v-else-if / v-else / v-show

by Bilal AFSAR

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p v-if="show"> Beni Görebilirsin!</p>
  <p v-if="!show"> Beni Görebilir misin acaba? :)</p>
  <p v-else> Peki ya beni :P</p>
  <button @click="show = !show">Göster / Gizle</button>

  <p v-if="sayi < 10"> Sayı 10'dan küçüktür</p>
  <p v-else-if="sayi > 10"> Sayı 10'dan büyüktür</p>
  <p v-else> Sayı 10'a eşittir</p>

  <hr>
  <button @click = "showParagh = !showParagh"> Paragh Göster/Gizle	</button>
  <p v-show="showParagh"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis delectus, eius totam velit sequi a modi voluptas quod, temporibus necessitatibus aperiam. Hic accusamus ut quod dolore esse incidunt, iusto placeat. </p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    show: false,
    sayi: 10,
		showParagh : false
  }
});