vue exercise1

OUO·2023년 1월 27일
0
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <!-- fill the <p> below with your Name and Age - using Interpolation -->
  <h1>
    1. exercise
  </h1>
  <div>
    My name : {{name}}
    <div>
      My age : {{age}}
    </div>
  </div>

  <!-- Output your age, multiplied by 3 -->
  <h1>
    2. exercise
  </h1>
  <p>
    AGE*3 = {{age * 3}}
  </p>
  <!-- Call a function to output a random float between 0 and 1 (math.random()) -->
  <h1>
    3. exercise
  </h1>
  <p>
    {{randomnum()}}
  </p>
  <!-- search any image on Google and output it here by binding the "src" attribute -->
  <!-- fill the <p> below with your Name and Age - using Interpolation -->
  <h1>
    4. exercise
  </h1>
  <div>
    <img :src="thumnail" style="width:100px; height:100px">
  </div>
  <!-- pre-populate this input with your name (set the "value" attribute) -->
  <h1>
    5. exercise
  </h1>
  <div>
    <input type="text" :value="name">
  </div>
</div>
new Vue({
  el: "#app",
  data: {
    name: "alo",
    age: 13,
    thumnail:'http://www.coindeskkorea.com/news/photo/202201/77238_17805_4923.png'
  },
  methods: {
    randomnum: function() {
      return Math.random()
    }
  }
});

profile
develoops!er

0개의 댓글