JSFiddle - React, Tailwind, and code Playground

by Bilal AFSAR

HTML

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

<div id="exercise">
  <!-- 1) Interpolation yani {{}} Syntax'ını kullanarak <p> elementinin içeriğini Name ve Age verileriyle doldurun-->
  <p>VueJS Muazzam bir Framework - {{ name }} ({{ age }})</p>
  <!-- 2) Yaşınızı 5 ile çarpıp <p> içerisinde yazdırınız -->

  <p>{{ age * 5}}</p>

  <!-- 3) Fonksiyon çağırarak 0 ile 1 arasında bir sayı üretip <p> içerisinde yazdırınız (Math.random()) -->
  <p>{{ getRandomNumber() }}</p>

  <!-- 4) Google üzerinden bulacağınız herhangi bir fotoğrafı <img> elementinde gösterme işlemini yapınızı. Bunu yaparken "src" attribute' una bind etmeyi unutmayınız -->
  <img v-bind:src="imgSrc" alt="">
  <!-- 5) Name değişkeninin değerinin <input /> içine yazdığınız değer ile anlık olarak değiştirilmesini sağlayınız. ("value" attribute kullanarak) -->
  <div>
    <input type="text" v-model="name">
  </div>
  <div>
    <input type="text" v-on:input="changeName" v-bind:value="name">
  </div>
</div>

JavaScript

new Vue({
  el: "#exercise",
  data: {
    name: "Bilâl AFŞAR",
    age: 34,
    imgSrc: "https://www.w3schools.com/images/colorpicker.gif",
  },
  methods: {
    getRandomNumber: () => {
      return Math.random();
    },
    changeName: function(e) {
      this.name = e.target.value;
    }
  }
})