Vue.js Eğitimi 03 Ödev 05- Hocanın Çözümü

by Bilal AFSAR

HTML

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

<div id="exercise">
  <!-- 1) Butona tıklayarak <p> elementleri arasında bir Toggle İşlevi yapın. Hem v-if hem de v-show syntax'larını kullanarak bu işlemi gerçekleştiriniz. Aralarındaki farkı Öğeyi İncele diyerek bu iki syntax farkını gözlemleyiniz -->
  <div>
    <button @click="show=!show">Toggle</button>    
	<p v-if="show">Beni Görebiliyor musun?</p>
    <p v-else>Ya da beni görebiliyor musun?</p>	
    <p v-show="show">Beni Görebiliyor musun?</p>
    <p v-show="!show">Ya da beni görebiliyor musun?</p>
  </div>
  <!-- 2) Array kullanarak bir <ul> listesi oluşturunuz. Liste içerisinde hem Array'deki verinin değerini hem de index numarasını her bir elementin içerisine yazdırınız  -->
  <ul>
    <li v-for="(item, index) in array"> {{ item }} - {{ index }}</li>
  </ul>
  <!-- 3) Yan taraftaki objenin tüm key ve value verilerini yazdırınız: customObject: {title: 'Game of Thrones',author: 'George R.R',books: '7'}. Ayrıca tüm elementlerin index numarasını da yazdırınız. -->
  <ul>
    <li v-for="(value, keyName, index) in customObject"> {{ keyName }} : {{ value }} - {{ index }}</li>
  </ul>
  <!-- 4) Yan taraftaki objenin tüm value değerlerini yazdırınız. Ayrıca iç içe bir loop daha kurarak Array içerisindeki verileri de yazdırınız : { name: 'NesnedLoop', id: 19,data: [4.3, 2.67, 10.42, 1402] } (ipucu: v-for ve v-if Directive'lerinin beraber kullanımı bunu başarmanızı sağlayacaktır.) -->
  <ul>
    <li v-for="value in testData">
    	<template v-if="Array.isArray(value)"> 
			<div v-for="item in value"> {{ item }}</div>
		</template>		
		<template v-else>
			{{ value }}..
		</template>				
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#exercise',
  data: {
  	show : false,
    array: ['Gökhan', 'Defne', 'Berk', 'Özge'],
    customObject: {
      title: 'Game of Thrones',
      author: 'George R.R',
      books: '7'
    },
    testData: {
      name: 'NesnedLoop', 
      id: 10,
      data: [3,45,19,14.02, 20.30, 20.18]
    }
  }
});