Vue.js Eğitimi 03 Ödev 05

by Bilal AFSAR

HTML

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

<div id="exercise">
  <div>
    <button @click="canYouSeeMe = !canYouSeeMe">Toggle</button>
    <p v-if="canYouSeeMe">Beni Görebiliyor musun?</p>
    <p v-else>Ya da beni görebiliyor musun?</p>

    <p v-show="canYouSeeMe">Beni Görebiliyor musun?</p>
    <p v-show="!canYouSeeMe">Ya da beni görebiliyor musun?</p>
  </div>
  <hr />
  <ul>
    <li v-for="(item, index) in array">{{ index }} : {{ item }}</li>
  </ul>
  <hr />
  <ul>
    <li v-for="(obj, key, ind) in customObject"><b>{{ ind }}</b> - <u>{{ key }}</u> - <i>{{ obj }}</i></li>
  </ul>
  <hr />
  <ul>
    <li v-for="(obj, key) in testData">
      <u>{{ key }}</u>
      <template v-if="typeof(obj) !== 'object'">
				: <i> {{ obj }}</i>
      </template>
      <template v-else>
			<ul>
      	<li v-for="value in obj"> {{ value }} </li>
      </ul>
      </template>
    </li>
  </ul>
  <hr />
</div>

JavaScript

new Vue({
  el: '#exercise',
  data: {
    array: ['Gökhan', 'Defne', 'Berk', 'Özge'],
    customObject: {
      title: 'Game of Thrones',
      author: 'George R.R',
      books: '7'
    },
    testData: {
      name: 'TESTOBJECT',
      id: 10,
      data: [1.67, 1.33, 0.98, 2.21]
    },

    canYouSeeMe: true,

  }
});